mardi 28 juin 2016

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

Aucun commentaire:

Enregistrer un commentaire