Swiper使用过程中注意的一些点.md

页面每次动态获取数据生成 slide 的个数，可以加下面两个参数。

var mySwiper = new Swiper('.swiper-container', {
    observer: true,//修改swiper自己或子元素时，自动初始化swiper 
    observeParents: true,//修改swiper的父元素时，自动初始化swiper ;
   
});

如果有左右切换按钮，想在第一页和最后一页隐藏上一个和下一个按钮。

var mySwiper = new Swiper('.swiper-container', {
    on: {
        slideChangeTransitionEnd: function() {
            //alert(this.activeIndex); //切换结束时，告诉我现在是第几个slide
            if (this.activeIndex === 0) {
                $('.prev').hide();
            } else {
                $('.prev').show();
            }
            //3 就是最后一页，你有几页就填对应几数字
            if (this.activeIndex === 3) {
                $('.next').hide();
            } else {
                $('.next').show();
            }
        },
    },
});

如果切换内容的长度不一致

var mySwiper = new Swiper('.swiper-container', {
    autoHeight: true,
})

如果切换内容要可点击

var mySwiper = new Swiper('.swiper-container', {
    preventClicks: false
})

如果页面切换几十个，dom 撑不住，可以使用虚拟 Dom

var mySwiper = new Swiper('.swiper-container', {
    direction: 'vertical',
    virtual: {
        slides: (function () {
            var slides = [
                ` <div class="div_s"><img class="pic swiper-lazy" src="img/1.jpg" alt="" /></div>`,
                `  <div class="div_s"><img class="pic swiper-lazy" src="img/2.jpg" alt="" /></div>`,
                `<div class="div_s"><img class="pic swiper-lazy" src="img/3.jpg" alt="" /></div>`,
                `<div class="div_s"><img class="pic swiper-lazy" src="img/4.jpg" alt="" /></div>`,
                ` <div class="div_s"><img class="pic swiper-lazy" src="img/5.jpg" alt="" /></div>`,
                ` <div class="div_s"><img class="pic swiper-lazy" src="img/6.jpg" alt="" /></div>`,
                ` <div class="div_s"><img class="pic swiper-lazy" src="img/7.jpg" alt="" /></div>`,
                ` <div class="div_s"><img class="pic swiper-lazy" src="img/8.jpg" alt="" /></div>`,
                ` <div class="div_s"><img class="pic swiper-lazy" src="img/9.jpg" alt="" /></div>`,
                ` <div class="div_s"><img class="pic swiper-lazy" src="img/10.jpg" alt="" />`,
                `  <div class="div_s"><img class="pic swiper-lazy" src="img/37.jpg" alt="" /></div>`,
                `  <div class="div_s"><img class="pic swiper-lazy" src="img/38.jpg" alt="" /></div>`,
                `  <div class="div_s"><img class="pic swiper-lazy" src="img/39.jpg" alt="" /></div>`,
                `  <div class="div_s"><img class="pic swiper-lazy" src="img/40.jpg" alt="" /></div>`,
                `  <div class="div_s"><img class="pic swiper-lazy" src="img/41.jpg" alt="" /></div>`,
                `  <div class="div_s"><img class="pic swiper-lazy" src="img/42.jpg" alt="" /></div>`,
                `  <div class="div_s"><img class="pic swiper-lazy" src="img/43.jpg" alt="" /></div>`,
                `  <div class="div_s"><img class="pic swiper-lazy" src="img/44.jpg" alt="" /></div>`,
                `  <div class="div_s"><img class="pic swiper-lazy" src="img/45.jpg" alt="" /></div>`,
                `  <div class="div_s"><img class="pic swiper-lazy" src="img/46.jpg" alt="" /></div>`,
                `  <div class="div_s"><img class="pic swiper-lazy" src="img/47.jpg" alt="" /></div>`,
                `  <div class="div_s"><img class="pic swiper-lazy" src="img/48.jpg" alt="" /></div>`,
                `  <div class="div_s"><img class="pic swiper-lazy" src="img/49.jpg" alt="" /></div>`,
                `  <div class="div_s"><img class="pic swiper-lazy" src="img/50.jpg" alt="" /></div>`,
                `  <div class="div_s"><img class="pic swiper-lazy" src="img/51.jpg" alt="" /></div>`,
                `  <div class="div_s"><img class="pic swiper-lazy" src="img/52.jpg" alt="" /></div>`,
                `  <div class="div_s"><img class="pic swiper-lazy" src="img/53.jpg" alt="" /></div>`,
                `  <div class="div_s"><img class="pic swiper-lazy" src="img/54.jpg" alt="" /></div>`,
                `  <div class="div_s"><img class="pic swiper-lazy" src="img/55.jpg" alt="" /></div>`,
                `  <div class="div_s"><img class="pic swiper-lazy" src="img/56.jpg" alt="" /></div>`,
                `  <div class="div_s"><img class="pic swiper-lazy" src="img/57.jpg" alt="" /></div>`,
            ];
            return slides;
        }()),
    },
});