OWL Carousel 2：URL 哈希导航 - 链接到当前幻灯片

Question

我正在使用优秀的滑块 OWL Carousel 2。http://www.owlcarousel.owlgraphic.com/

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

我的猫头鹰代码：

<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