OwlCarousel2 Updating URL Hash Navigation on Drag

현재 컨베이어가 필요로하는 OwlCarousel2를 사용하고 있습니다. http://www.owlcarousel.owlgraphic.com/demos/urlhashnav.html OwlCarousel2 Updating URL Hash Navigation on Drag

<div id="contestant-carousel"> 
    <div id="poll-images" class="owl-carousel"> 
     <?php 
      for($counter = 1; $counter <= 14; $counter++) { 
       echo "<div class='item' data-hash='$counter'><a href='" . HTTP_SERVER . "vote.php?contestant_id=$counter'><img src='/images/contestants_mobile/$counter.png' alt='$counter'></a></div>"; 
      } 
     ?> 
    </div> 
</div>

가 위 내 회전 목마를 생성하는 데 사용하는 PHP 코드 : 그것이 URL 해시 탐색이 있기 때문에 나는 OwlCarousel1 이상 OwlCarousel2를 선택했다. 나는 14 개의 이미지를 가지고 있으므로, 내 코드는 14 개의 이미지를 반복하고 각각의 이미지에 data-hash 객체를 추가합니다 (필요한 것을 탐색하는 앵커 용). 사용자가 수동으로 URL의 해시에 추가하는 경우

$(document).ready(function() { 
    $("#poll-images").owlCarousel({ 
     items: 1, 
     loop:false, 
     center:true, 
     margin:10, 
     lazyLoad:false, 
     URLhashListener:true, 
     onDragged:callback, 
     autoplayHoverPause:true, 
     startPosition: 'URLHash' 
    }); 

    function callback(event) { 
     window.location.hash = event.item.index; 
     console.log(event.item.index); 
    } 
});

지금, 위의 회전 목마가 완벽하게 작동, 즉 someurl.com/voting.php#4,이 네 번째 이미지로 이동합니다 : 다음

는

내 자바 스크립트 코드입니다.

그러나 URL이 someurl.com/voting.php으로 이동하면 각 이미지를 스크롤 할 때 내 URL이 이에 따라 앵커를 업데이트합니다. 왜? 내 사용자가 이미지 (href 포함)를 클릭하고 이전 페이지로 이동하면 처음 이미지로 이동하는 기본 동작 대신 찾고 있던 이미지로 돌아갈 수 있습니다. (실제로 OwlCarousel1 매우 다르다)을 OwlCarousel2의 API에 따르면

는, 현재의 아이템을 얻을, 당신은 this을 수행 할 수 있습니다 특히

function callback(event) { 
    // Provided by the core 
    var element = event.target;   // DOM element, in this example .owl-carousel 
    var name  = event.type;   // Name of the event, in this example dragged 
    var namespace = event.namespace;  // Namespace of the event, in this example owl.carousel 
    var items  = event.item.count;  // Number of items 
    var item  = event.item.index;  // Position of the current item 
    // Provided by the navigation plugin 
    var pages  = event.page.count;  // Number of pages 
    var page  = event.page.index;  // Position of the current page 
    var size  = event.page.size;  // Number of items per page }

을 event.item.index를 사용하여. 내 코드가 정확히 그렇게했습니다! 그러나 현재 색인을 검색 할 수 없습니다! Chrome 콘솔에서 내 오류 : Uncaught TypeError: Cannot read property 'item' of undefined

JS 전문가로부터의 도움을 많이 주시면 감사하겠습니다.

OwlCarousel2 API뿐만 아니라 StackOverflow 전체에서 검색해 보았습니다. 그러나이 작업을 수행 할 수 있는지 확인할 필요가 없습니다. 여기에 수정 프로그램을 찾을 수 append /remove anchor name from current url without refresh

출처

2015-01-29 theGreenCabbage

나는이 스레드를 확인했다! Owl Carousel 2 - Get src of current slide

// jQuery method on 
    owl.on('changed.owl.carousel', function(property){ 
     var current = property.item.index; 
     window.location.hash = current + 1; 
    });

OwlCarousel2 사람은 자신의 API =/

는 여기를 업데이트해야

출처

2015-01-29 15:39:14 theGreenCabbage

OwlCarousel2 Updating URL Hash Navigation on Drag

답변

관련 문제