swiper 移动端和PC端的常用解决方案

1.利用watchSlidesVisibility和[clickedIndex]制作宽度超出后自动适应的导航

    

        

            版块1
        

            版块2
        

            版块3
        

            版块4
        

            版块5
        

            版块6
        

            版块7
        

            版块8
    


    

        

            slider1
        

            slider2
        

            slider3
        

            slider4
        

            slider5
        

            slider6
        

            slider7
        

            slider8
    

2.pc鼠标/方向键控制轮播行为

    

        

            slider1
        

            slider2
        

            slider3
    

3.mousewheelForceToAxis可用html5页面
html：同上

4.对imag的操作中具有lazyLoading的功能
5.loop功能(类似产品展示)

var mySwiper = new Swiper('.swiper-container',{
loop : true,
slidesPerView : 'auto',
loopedSlides :8,
})

6.zoomToggle. 是否允许双击缩放.

 
var mySwiper = new Swiper('.swiper-container',{
zoom : true,
zoomToggle :false,     //设置为false 不允许双击缩放，只允许手机端缩放
})

7.onTransition(swiper动画操作)

    var swiper = new Swiper('.swiper-container',{
        direction : 'vertical',
        followFinger : false,
        speed:800,
        mousewheel: true,
        pagination : {
            el:'.swiper-pagination',
        },
        on:{
            init:function(swiper){
                  //动画初始设置
            },
            transitionStart: function(){
               //动画开始设置
            },
            transitionEnd: function(){
                 //动画结束设置
                
            },
        }
    });

8.touchangle (swiper默认设置为45，根据需要进行修改)，还可以和ontouchmoveopposite(swiper,event)一起调用
9.onAutoplayStop 回调函数，自动切换结束时执行（由自动切换进入到不自动切换）可用于脑洞效果有自动播放到手动播放。