OWL 轮播 2：URL 哈希导航 - Link 到当前幻灯片

Question

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

我的问题是 URLhashListener 选项只允许您为特定幻灯片创建 link 但不允许用户从中复制 url link要共享的当前幻灯片。我假设此选项的正确行为是 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，效果很好（您可以 link 到特定的幻灯片）。但是当您单击 next 并到达下一张幻灯片时，URL 将保持为 #HASHID。 link 不再对应于当前幻灯片。

<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 轻松 "listen" 幻灯片更改事件，然后您可以根据幻灯片的索引更改哈希。

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

OWL 轮播 2：URL 哈希导航 - Link 到当前幻灯片

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

javascript

jquery

url-routing

owl-carousel