mx_site/static/js/app-new.js

// var thumbsSwiper = new Swiper('#thumbsSwiper', {
//     autoplay: false,
//     slidesPerView: 6,
//     // mousewheel:false,
//     watchSlidesVisibility: true,//防止不可点击
//     slideToClickedSlide: true,
//     watchSlidesProgress : true,
//     on:{
//         slideChange: function(){
//             // 切换回来的index
//             console.log(this.realIndex);
//         },
//     },
// });

var swiper = new Swiper('#swiperContainer', {
    direction: 'vertical',
    autoHeight: true,
    speed: 600,
    autoplay: false,
    slidesPerView : 5,
    slidesPerGroup : 1,
    spaceBetween: 0,
    centeredSlides: true,
    centeredSlidesBounds : true,
    breakpoints: {
        1000: {  //当屏幕宽度小于等于1280
            slidesPerView: 5,
            spaceBetween: 0
        },
    },
    loop: true,
    // thumbs: {
    //     swiper: thumbsSwiper,
    // },
    on:{
        slideChange: function(){
            // 切换的index =  this.realIndex
            $('#swiper-nav-div .item-nav').removeClass('item-nav-active');
            $('#swiper-nav-div .item-nav').eq(this.realIndex).addClass('item-nav-active')
        },
    },
});

init();
$('#swiper-nav-div').on('click','.item-nav',function(){
    var index = $(this).index();
    if($('body').width() >= 769){
        swiper.slideToLoop(index, 300, false);
    }else{
        $('#swiper-nav-div .item-nav').removeClass('item-nav-active');
        $('#swiper-nav-div .item-nav').eq(index).addClass('item-nav-active');

        $('.swiper-content-div.mobile .img').removeClass('active-img');
        $('.swiper-content-div.mobile .img').eq(index).addClass('active-img')
    }
});

function init(){
    if($('body').width() < 769){
        $('#swiper-nav-div .item-nav').removeClass('item-nav-active');
        $('#swiper-nav-div .item-nav').eq(0).addClass('item-nav-active');
    }
}

$(window).resize(function(){
    init();
});