CODEWITHSUNDEEP
javascriptjqueryurl-routingowl-carousel
pinkp
pinkp

Reputation: 455

OWL Carousel 2: URL Hash Navigation - Link to current slide

I'm using the excellent slider OWL Carousel 2. http://www.owlcarousel.owlgraphic.com/

My issue is the URLhashListener option only allows you to create a link to a specific slide but does not allow the user to copy the url link from the current slide to share. I would assume the correct behaviour of this option would be the URL updates as the user moves to the next slide so they can then copy that unique URL. http://www.owlcarousel.owlgraphic.com/demos/urlhashnav.html

My OWL code:

<script type="text/javascript">
  //<![CDATA[
  $(document).ready(function() {
    var owl = $(".owl-carousel");
    owl.owlCarousel({
      smartSpeed:1500,
      items:1,
      lazyLoad:true,
      loop:true,
      URLhashListener:true,
      startPosition: 'URLhash',
      nav: true,
    });
  });
  //]]>
</script>

I'm using data-hash in my image tag to generate the hash id for each image which works fine (you can link to the specific slide). But when you click next and arrive at the next slide the URL will remain as #HASHID. The link no longer corresponds to the current slide. 

<img id="zm" class="owl-lazy owlimg" data-hash="slideID" data-src="myimagelink.jpg">

Here's a live page with the url hash nav working:
http://www.legacyart.pinkpoliceman.com/collections/birds-of-prey/

With hash:
http://www.legacyart.pinkpoliceman.com/collections/birds-of-prey/#slide14

I'm sure these docs hold part of the answer but I'm not sure how to piece it all together. http://www.owlcarousel.owlgraphic.com/docs/api-events.html

Upvotes: 1

Views: 14245

Answers (1)

Mosh Feu
Mosh Feu

Reputation: 29337

Update (Native solution)

It seems that once you add data-hash to your items, the plugin take care about all the functionality.

http://jsbin.com/javuwod/edit?html,js

Original Answer

You can easily "listen" to slide changed event using changed.owl.carousel, then you can change the hash according the slide's index.

var owl = $('.owl-carousel');
owl.owlCarousel({
  margin:10,
  nav:true,
  URLhashListener: true,
  startPosition: 'URLHash'
});
// Listen to owl events:
owl.on('changed.owl.carousel', function(event) {
  location.hash = 'slide' + event.property.value;
})
<link href="http://www.owlcarousel.owlgraphic.com/assets/css/docs.theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/owl.carousel.js"></script>

<div id="demos">
  <div class="owl-carousel">
    <div class="item" data-hash="slide0">
      <h4>1</h4>
    </div>
    <div class="item" data-hash="slide1">
      <h4>2</h4>
    </div>
    <div class="item" data-hash="slide2">
      <h4>3</h4>
    </div>
    <div class="item" data-hash="slide3">
      <h4>4</h4>
    </div>
    <div class="item" data-hash="slide4">
      <h4>5</h4>
    </div>
    <div class="item" data-hash="slide5">
      <h4>6</h4>
    </div>
    <div class="item" data-hash="slide6">
      <h4>7</h4>
    </div>
    <div class="item" data-hash="slide7">
      <h4>8</h4>
    </div>
    <div class="item" data-hash="slide8">
      <h4>9</h4>
    </div>
    <div class="item" data-hash="slide9">
      <h4>10</h4>
    </div>
    <div class="item" data-hash="slide10">
      <h4>11</h4>
    </div>
    <div class="item" data-hash="slide11">
      <h4>12</h4>
    </div>
  </div>
</div>

http://jsbin.com/javuwod/edit?html,js

Upvotes: 5

Related Questions