我在菜单上用猫头鹰旋转木马。当我滚动到div时,猫头鹰旋转木马自动向右滑动。现在,当我到达特定的div时,我将类添加到幻灯片(活动的),但是由于某种原因,我无法从其他幻灯片(他的兄弟)中移除活动的类。
我认为最好检查一下jsfiddle以了解问题所在...
<div class="body">
<div class="menu">
<ul class="owl-carousel owl-theme">
<a href="#a" data-num="0">Review</a>
<a href="#a" data-num="1" class="item">a</a>
<a href="#b" data-num="2" class="item">b</a>
<a href="#c" data-num="3" class="item">c</a>
<a href="#d" data-num="4" class="item">d</a>
<a href="#d" data-num="5" class="item">e</a>
<a href="#d" data-num="6" class="item">f</a>
</ul>
</div>
JS文件
$('.owl-carousel').owlCarousel({
nav: false,
dots: false,
singleItem: true,
})
var owl = $('.owl-carousel');
owl.owlCarousel();
$( window ).scroll(function() {
let scrollbarLocation = $(this).scrollTop();
let scrollLinks = $('.item');
scrollLinks.each(function(){
let sectionOffset = $(this.hash).offset().top;
if (sectionOffset <= scrollbarLocation){
$(this).siblings().removeClass('active-link');
$(this).addClass('active-link');
let goToSlide = $(this).attr('data-num')
owl.trigger('to.owl.carousel', goToSlide);
}
})
if( scrollbarLocation === 0){
scrollLinks.removeClass('active-link');
owl.trigger('to.owl.carousel', 0);
}
});
查看https://jsfidle.net/jt31h4pr/132/
看看这把小提琴
https://jsfidle.net/09slpuwd/1/
您做错了什么是试图从this
中删除活动类,然后将活动类添加到相同的this
中,但实际上什么也不做。我的建议是从所有'.item'
emelements中删除活动类,然后将其添加到活动类中。
作为替代方案,您可以存储以前的项目并从其中删除类,但我认为第一种方法更好。