Question

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

我的问题是URLhashListener选项只允许您创建指向特定幻灯片的链接，但不允许用户将当前幻灯片中的网址链接复制到共享。我假设此选项的正确行为是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并到达下一张幻灯片时，该网址将保持为#HASHID。该链接不再对应于当前幻灯片。

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

这是一个带有url hash nav工作的实时页面：
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

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

1 个答案: