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 = [
                ` 
`,
                `  
`,
                `
`,
                `
`,
                ` 
`,
                ` 
`,
                ` 
`,
                ` 
`,
                ` 
`,
                ` 
`,
                `  
`,
                `  
`,
                `  
`,
                `  
`,
                `  
`,
                `  
`,
                `  
`,
                `  
`,
                `  
`,
                `  
`,
                `  
`,
                `  
`,
                `  
`,
                `  
`,
                `  
`,
                `  
`,
                `  
`,
                `  
`,
                `  
`,
                `  
`,
                `  
`,
            ];
            return slides;
        }()),
    },
});