swiper的基础应用

1.怎样初始化多个swiper？

        1.给父元素加区分
        2.给自己加不同的类名 id

        <div class="swiper-wrapper" id="swiper1">
            <div class="swiper-slide">
                <img data-src="img/01.jpg" alt="" class="swiper-lazy">
                <div class="swiper-lazy-preloader"></div>
            </div>
            <div class="swiper-slide">
                <img data-src="img/02.jpg" alt="" class="swiper-lazy">
                <div class="swiper-lazy-preloader"></div>
            </div>
            <div class="swiper-slide">
                <img data-src="img/03.jpg" alt="" class="swiper-lazy">
                <div class="swiper-lazy-preloader"></div>
            </div>
            <div class="swiper-slide">
                <img data-src="img/04.jpg" alt="" class="swiper-lazy">
                <div class="swiper-lazy-preloader"></div>
            </div>
            <div class="swiper-slide">
                <img data-src="img/05.jpg" alt="" class="swiper-lazy">
                <div class="swiper-lazy-preloader"></div>
            </div>
        </div>

2.控制swiper的显示隐藏滑动无效

                var swiper = new Swiper('.swiper-container',{
                    // *** 加入初始化
                    observe:true,
                    observeParents:true,
                });

3.动态创建swiper问题，无限滑动失效

​
                var swiper = new Swiper('.swiper-container',{
                    // *** 加入初始化
                    observe:true,
                    observeParents:true,
                });

​

4.swiper基本属性

                var swiper = new Swiper('.swiper-container',{
                    autoplay:true,//是否自动滑动
                    direction:"horizontal",//horizontal：横向切换 vertical：竖向切换
                    //指定分页
                    pagination:{
                        el:".swiper-pagination"
                    },
                    // 循环
                    loop:true,
                    // *** 初始化
                    observe:true,
                    observeParents:true,
                    // 左右控制按钮
                    navigation:{
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    scrollbar: {
                        el: '.swiper-scrollbar',
                    },
                    // 懒加载
                    lazy: {
                        loadPrevNext: true,
                    },
                    on:{
                        sliderChange:function () {
                            // 用于判断当前滑动到哪一页
                            console.log(this.activeIndex)
                            if (this.activeIndex==4){
                                this.allowSlideNext=false;
                            }else {
                                this.activeIndex=true
                            }
                        }
                    }

                });

    1.swiper-container: 包含子元素
    2.swiper-wrapper : 饱汉子元素
    3.swiper-slider: 内容
    4.pagination: 添加分页器
    5.swiper-lazy:延迟加载
        data-src：路劲
        swiper-lazy-preloader：预加载
 

                    <div class="swiper-slide">
                        <img data-src="img/02.jpg" alt="" class="swiper-lazy">
                        <div class="swiper-lazy-preloader"></div>
                    </div>

详情参照swiper中文API文档：http://www.swiper.com.cn/api/index.html