Question

使用idangero.us swiper构建移动应用程序演示：

http://www.idangero.us/sliders/swiper/

我几乎让它以我想要的方式运作，有一个问题：

当您点击菜单中的其中一个标签时，它会将其更改为＆＃34;活动＆＃34;然后滑到合适的幻灯片上。我需要做的是当用户手动滑动其中一个幻灯片时更改选项卡类。所以如果你刷到关于我们的＃34;例如，滑动相应的选项卡应该更改为活动状态。

这里有一个例子：

当我在页面上有两个游标（一个用于导航，一个用于身体）时，我无法弄清楚如何使其工作。

这里是js：

$(function(){
//Init Navigation
var nav = $('.swiper-nav').swiper({
slidesPerView: 'auto',
freeMode:true,
freeModeFluid:true,
onSlideClick: function(nav){
pages.swipeTo( nav.clickedSlideIndex )
}
})

$(".swiper-nav a").on('touchstart mousedown',function(e){
e.preventDefault()
$(".swiper-nav .active").removeClass('active')
$(this).addClass('active')
tabsSwiper.swipeTo( $(this).index() )
})
$(".swiper-nav a").click(function(e){
e.preventDefault()
})

//Init Pages
var pages = $('.swiper-pages').swiper()

})

Fiddle is here

感谢。

Answer 1

尝试使用swiper API的onSlideChangeEnd回调。

//Init Pages
var pages = $('.swiper-pages').swiper({
    onSlideChangeEnd: function(swiper, direction) {
        $(".swiper-nav .active").removeClass('active');
        $(".swiper-nav li:nth-child("+(swiper.activeIndex+1)+") a").addClass('active');
    }
});

Fiddle

幻灯片滑动上的idangero.us swiper更新标签

1 个答案: