javascript - Owl Carousel 2 : URL Hash Navigation - Link to current slide

Question

我正在使用出色的 slider OWL Carousel 2。http://www.owlcarousel.owlgraphic.com/

我的问题是 URLhashListener 选项只允许您创建指向特定幻灯片的链接，但不允许用户从当前幻灯片复制 url 链接以进行共享。我假设此选项的正确行为是在用户移动到下一张幻灯片时更新 URL，以便他们随后可以复制该唯一 URL。 http://www.owlcarousel.owlgraphic.com/demos/urlhashnav.html

我的 OWL 代码:

<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>

我在我的图片标签中使用 data-hash 为每张图片生成哈希 ID，效果很好(您可以链接到特定的幻灯片)。但是，当您单击 next 并到达下一张幻灯片时，URL 将保持为 #HASHID。该链接不再对应于当前幻灯片。

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

这是一个使用 url 哈希导航的实时页面:
http://www.legacyart.pinkpoliceman.com/collections/birds-of-prey/

用散列:
http://www.legacyart.pinkpoliceman.com/collections/birds-of-prey/#slide14

我确信这些文档包含部分答案，但我不确定如何将它们拼凑在一起。 http://www.owlcarousel.owlgraphic.com/docs/api-events.html

Answer 1

更新(原生解决方案)

似乎一旦您将 data-hash 添加到您的项目中，该插件就会处理所有功能。

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

原始答案

您可以使用 changed.owl.carousel 轻松地“监听”滑动更改事件, 然后您可以根据幻灯片的索引更改散列。

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