Carousel - linking to slide from another page - why Url Hash Navigation not working?

Question

Can't get the link with the #tag to be recognised.

The items data-hash shows up in the browser URL window, but isn't being recognised by the script.

I'm using the standard script on the carousel page:

$(document).ready(function() {
            $('.sidetext-carousel').owlCarousel({
            items: 1, 
            loop: false, 
            center:true, 
            margin:30, 
            URLhashListener:true,
            startPosition: 'URLHash',
            });
        })

is this being overiden by other JS, such as this, which is in the owl.carousel_main.js file?

(function($) {
    "use strict";
    var fullHeight = function() {
        $('.js-fullheight').css('height', $(window).height());
        $(window).resize(function(){
            $('.js-fullheight').css('height', $(window).height());
        });
    };
    fullHeight();

var carousel = function() {
    $('.sidetext-carousel').owlCarousel({
        loop:true,
        autoplay: false,
        margin:30,
        animateOut: 'fadeOut',
        animateIn: 'fadeIn', 
        nav:true,
        dots: true,
        autoplayHoverPause: false,
        items: 1,
        navText : ["<p><small></small><span class='ion-ios-arrow-round-back'></span></p>","<p><small></small><span class='ion-ios-arrow-round-forward'></span></p>"],
        responsive:{
          0:{
            items:1
          },
          600:{
            items:1
          },
          1000:{
            items:1
          }
    }
    });
};
carousel();

})(jQuery);

Or is there a way to give the UrLHashNavigation script priority?

Or have I got the script in the wrong place?

Thanks.

Answer 1

is this being overiden by other JS, such as this, which is in the owl.carousel_main.js file?

No, because you can only call the Owl initializer function once. First come first serve. You will need to combine the two setup scripts with all the carousel options (items:1, loop:false, etc) in a single call.

Because your first Owl initializer script is placed before you included jQuery and the carousel JavaScript, it will fail and be ignored. But since your ..._main.js is included in the proper order, it runs.

To fix

Combine the two scripts, for example:

$('.sidetext-carousel').owlCarousel({
  items: 1, 
  loop: false, 
  center: true, 
  margin: 30, 
  URLhashListener: true,
  startPosition: 'URLHash',
  autoplay: false, 
  animateOut: 'fadeOut',
  animateIn: 'fadeIn', 
  nav: true,
  dots: true,
  autoplayHoverPause: false,
  navText : ["<p><small></small><span class='ion-ios-arrow-round-back'></span></p>","<p><small></small><span class='ion-ios-arrow-round-forward'></span></p>"],
  responsive:{
    0:{
      items:1
    },
    600:{
      items:1
    },
    1000:{
      items:1
    }
}

Note I did not validate the options, I copied them from you. If it had an error, it's still there.

Then remove the first initializer script and include the combined initializer script (assuming you put it in the ..._main.js) after including jQuery and the Owl.js: :

<script src="js/jquery.min.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/owl.carousel_main.js"></script>

And things should work.