1

現在、カルーセルのニーズに OwlCarousel2 を使用しています。URL ハッシュ ナビゲーションがあるため、OwlCarousel1 ではなく OwlCarousel2 を選択しました: http://www.owlcarousel.owlgraphic.com/demos/urlhashnav.html

<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 コードです。14 個の画像があるため、コードは 14 個の画像すべてをループし、data-hash各画像にオブジェクトを追加します (アンカーのナビゲートの必要性のため)。

以下は私のJavascriptコードです：

$(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);
    }
});

ここで、ユーザーが手動で URL にハッシュを追加すると、上記のカルーセルは完全に機能します。つまりsomeurl.com/voting.php#4、4 番目の画像に移動します。

ただし、私がやりたいのは、URL が に移動した場合、someurl.com/voting.php各画像をスクロールするときに、それに応じて URL がアンカーを更新することです。なんで？ユーザーが画像 ( を含むhref) をクリックして前のページに移動すると、最初の画像に移動するという既定の動作ではなく、見ている画像に戻ることができます。

OwlCarousel2 API (実際には OwlCarousel1 とはかなり異なります) によると、現在のアイテムを取得するには、次のようにします。

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ます。私のコードはまさにそれをしました！しかし、現在のインデックスを取得できません! 私のエラーは次 のとおりですUncaught TypeError: Cannot read property 'item' of undefined。Chromeのコンソールの下。

JS の達人からの助けをいただければ幸いです。

StackOverflow 全体と OwlCarousel2 API を検索して、これができるかどうかを調べてみましたが、うまくいきませんでした。

このスレッドも確認しました:更新せずに現在の URL にアンカー名を追加 / 削除する

4

1 に答える 1