OWLカルーセル2：URLハッシュナビゲーション - 現在のスライド

Question

私は2 http://www.owlcarousel.owlgraphic.com/

私の問題だけでは、特定のスライドにリンクを作成することができますが、ないURLhashListenerオプションで優れたスライダーOWLカルーセルを使用してい

へのリンクユーザーが現在のスライドから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> 

私は正常に動作し、各画像のハッシュIDを生成するために、自分のイメージタグでdata-hashを使用しています（特定のスライドにリンクすることができます）。しかし、nextをクリックして次のスライドに到着すると、URLは#HASHIDのままです。リンクは現在のスライドには対応しません。これらのドキュメントは、答えの一部を保持するが、私は、私は確信している
http://www.legacyart.pinkpoliceman.com/collections/birds-of-prey/#slide14

：ハッシュで
http://www.legacyart.pinkpoliceman.com/collections/birds-of-prey/

：ここ

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

はライブURLハッシュのnav作業のページですそれを一緒にまとめていく方法がわからない。 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