idangero.us 滑动滑动更新选项卡

Question

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

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

我已经几乎按照我想要的方式工作了，但有一个问题：

当您单击菜单中的一个选项卡时，它会将其类别更改为“活动”并滑动到正确的幻灯片。当用户手动滑动其中一张幻灯片时，我还需要更改选项卡类。因此，例如，如果您滑动到“关于我们”幻灯片，相应的选项卡应该会变为活动状态。

这里有一个例子：

"Tabs with Feedback"

当我在页面上有两个滑动器（一个用于导航，一个用于正文）时，我只是不知道如何使其工作。

这是 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