OwlCarousel2 正在更新 URL 拖动时的哈希导航

Question

我目前正在使用 OwlCarousel2 来满足我的轮播需求。我选择 OwlCarousel2 而不是 OwlCarousel1，因为它有一个 URL 哈希导航：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 代码。我有十四张图片，所以我的代码遍历所有十四张图片并向每张图片添加一个 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，上面的轮播将完美运行，这将导航到第四张图片。

但是，我想做的是，如果 url 导航到 someurl.com/voting.php，当它们滚动浏览每个图像时，我的 URL 会相应地更新其锚点。为什么？因为如果我的用户单击图像（包含 href），然后他们转到上一页，他们可以导航回他们正在查看的图像，而不是转到第一张图像的默认行为.

根据OwlCarousel2 API（实际上与OwlCarousel1有很大不同），要获取当前项目，你可以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 专家的任何帮助！

我尝试搜索整个 Whosebug 以及 OwlCarousel2 API 看看我是否可以做到这一点，但是，没有运气。

我也检查了这个线程：append /remove anchor name from current url without refresh

Answer 1

在此处找到修复！

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

OwlCarousel2 家伙需要更新他的 API =/

在此处找到：

OwlCarousel2 正在更新 URL 拖动时的哈希导航

OwlCarousel2 Updating URL Hash Navigation on Drag

javascript

php

owl-carousel

owl-carousel-2