Carousel -链接到幻灯片从另一个页面-为什么Url哈希导航不工作?

Question

无法识别带有#标签的链接

项目data-hash显示在浏览器的URL窗口中，但没有被脚本识别。

我在carousel页面上使用标准脚本:

$(document).ready(function() {
$('.sidetext-carousel').owlCarousel({
items: 1, 
loop: false, 
center:true, 
margin:30, 
URLhashListener:true,
startPosition: 'URLHash',
});
})

这是被其他JS覆盖，如这，这是在owl.carousel_main.js文件?

(function($) {
"use strict";
var fullHeight = function() {
$('.js-fullheight').css('height', $(window).height());
$(window).resize(function(){
$('.js-fullheight').css('height', $(window).height());
});
};
fullHeight();
var carousel = function() {
$('.sidetext-carousel').owlCarousel({
loop:true,
autoplay: false,
margin:30,
animateOut: 'fadeOut',
animateIn: 'fadeIn', 
nav:true,
dots: true,
autoplayHoverPause: false,
items: 1,
navText : ["<p><small></small><span class='ion-ios-arrow-round-back'></span></p>","<p><small></small><span class='ion-ios-arrow-round-forward'></span></p>"],
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
}
}
});
};
carousel();

}) (jQuery);

或者有一种方法给UrLHashNavigation脚本优先级?

还是我把脚本放在了错误的地方?

谢谢。

Answer 1

是否被其他JS覆盖，例如在owl.carousel_main.js文件中?

不能，因为你只能调用一次Owl初始化函数。先到先得。您需要在一次调用中将两个设置脚本与所有carousel选项(items:1, loop:false等)结合起来。

因为你的第一个Owl初始化脚本是放在之前的如果您包含jQuery和carousel JavaScript，它将失败并被忽略。但是由于您的..._main.js以正确的顺序包含，因此它运行。

合并两个脚本，例如:

$('.sidetext-carousel').owlCarousel({
items: 1, 
loop: false, 
center: true, 
margin: 30, 
URLhashListener: true,
startPosition: 'URLHash',
autoplay: false, 
animateOut: 'fadeOut',
animateIn: 'fadeIn', 
nav: true,
dots: true,
autoplayHoverPause: false,
navText : ["<p><small></small><span class='ion-ios-arrow-round-back'></span></p>","<p><small></small><span class='ion-ios-arrow-round-forward'></span></p>"],
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
}
}

注意我没有验证这些选项，我是从你那里抄来的。如果它有错误，它仍然在那里。

然后删除第一个初始化脚本并包含合并的初始化脚本(假设您将其放在..._main.js中)在之后包括jQuery和Owl.js::

<script src="js/jquery.min.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/owl.carousel_main.js"></script>

一切都会好起来的。