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 해시 탐색 작업과 페이지의 모든 것을 함께 모을 방법을 모릅니다. 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