我目前正在使用 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
对象(用于 anchor 导航需求)。
以下是我的 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
,上面的轮播就能完美工作,这将导航到第四张图像。
但是,我想要做的是,如果网址导航到 someurl.com/voting.php
,当他们滚动浏览每个图像时,我的网址将相应地更新其 anchor 。为什么?因为如果我的用户单击图像(其中包含 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
。我的代码正是这样做的!但我无法检索当前索引!我的错误是:Uncaught TypeError: Cannot read property 'item' of undefined
under Chrome's console.
非常感谢 JS 专家的任何帮助!
我尝试在 StackOverflow 以及 OwlCarousel2 API 中进行搜索,看看是否可以做到这一点,但是没有成功。
我还检查了此线程:append /remove anchor name from current url without refresh
最佳答案
在这里找到修复!
// jQuery method on
owl.on('changed.owl.carousel', function(property){
var current = property.item.index;
window.location.hash = current + 1;
});
OwlCarousel2 家伙需要更新他的 API =/
关于javascript - OwlCarousel2 更新拖动时的 URL 哈希导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28215910/