CODEWITHSUNDEEP
javascriptjquery
DeanH
DeanH

Reputation: 523

idangero.us swiper update tabs on slide swipe

Building a mobile a mobile app demo using the idangero.us swiper:

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

I've almost got it working the way I want, with one issue:

When you click on one of the tabs in the menu, it changes it's class to "active" and slides to the proper slide. What I need to do is also change the tab class when a user manually swipes one of the slides. So if you swipe to the "about us" slide for example, the corresponding tab should change to active.

There's an example of this in action here:

"Tabs with Feedback"

I just can't figure out how to make that work when I have two swipers on the page (one for the nav, and one for the body).

Here's the 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

Thanks.

Upvotes: 1

Views: 4706

Answers (1)

dongseok0
dongseok0

Reputation: 757

Try to use onSlideChangeEnd callback from swiper API.

//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

Upvotes: 1

Related Questions