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

<link href="/dist/css/swiper.min.css" rel="stylesheet" type="text/css">

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

<div class="swiper-container swiper-container-horizontal swiper-container-wp8-horizontal" id="swiper-container2" >
    <div class="swiper-wrapper" >
        <div class="swiper-slide swiper-slide-prev" >
            版块1</div>
        <div class="swiper-slide " >
            版块2</div>
        <div class="swiper-slide " >
            版块3</div>
        <div class="swiper-slide " >
            版块4</div>
        <div class="swiper-slide" >
            版块5</div>
        <div class="swiper-slide" >
            版块6</div>
        <div class="swiper-slide" >
            版块7</div>
        <div class="swiper-slide" >
            版块8</div>
    </div>
</div>
<div class="swiper-container swiper-container-horizontal swiper-container-wp8-horizontal" id="swiper-container3" >
    <div class="swiper-wrapper">
        <div class="swiper-slide blue-slide" >
            slider1</div>
        <div class="swiper-slide red-slide" >
            slider2</div>
        <div class="swiper-slide orange-slide swiper-slide-prev" >
            slider3</div>
        <div class="swiper-slide blue-slide swiper-slide-active">
            slider4</div>
        <div class="swiper-slide red-slide swiper-slide-next" >
            slider5</div>
        <div class="swiper-slide orange-slide" >
            slider6</div>
        <div class="swiper-slide blue-slide" >
            slider7</div>
        <div class="swiper-slide red-slide">
            slider8</div>
    </div>
</div>

<script src="/dist/js/swiper.min.js"></script>

<script> 
var mySwiper2 = new Swiper('#swiper-container2',{
watchSlidesProgress : true,
watchSlidesVisibility : true,
slidesPerView : 3,
on:{
tap: function(){
            mySwiper3.slideTo( mySwiper2.clickedIndex)
        }
}
})
var mySwiper3 = new Swiper('#swiper-container3',{

on:{slideChangeTransitionStart: function(){
            updateNavPosition()
        }
}

})

function updateNavPosition(){
        $('#swiper-container2 .active-nav').removeClass('active-nav')
        var activeNav = $('#swiper-container2 .swiper-slide').eq(mySwiper3.activeIndex).addClass('active-nav');


        if (!activeNav.hasClass('swiper-slide-visible')) {
console.log(1);
            if (activeNav.index()>mySwiper2.activeIndex) {
                               console.log(2);
                var thumbsPerNav = Math.floor(mySwiper2.width/activeNav.width())-1
                mySwiper2.slideTo(activeNav.index()-thumbsPerNav)
            }
            else {
                                console.log(3);
                mySwiper2.slideTo(activeNav.index())
            }   
        }
    }
</script>

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

<div class="swiper-container " >
    <div class="swiper-wrapper" >
        <div class="swiper-slide">
            slider1</div>
        <div class="swiper-slide ">
            slider2</div>
        <div class="swiper-slide">
            slider3</div>
    </div>
</div>

<script language="javascript"> 
var mySwiper = new Swiper('.swiper-container',{
keyboardControl : true,
 mousewheelControl : true,
loop:true,
})
</script>

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

<script language="javascript"> 
var mySwiper = new Swiper('.swiper-container',{
mousewheelControl : true,
direction:'vertical',
//mousewheelForceToAxis : true,
mousewheelInvert : true,
})
</script>

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

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

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

<div class="swiper-container " >
   <div class="swiper-wrapper">
       <div class="swiper-slide " >
           <div class="swiper-zoom-container">
               <img src="##"></div>
       </div>
       <div class="swiper-slide " >
           <div class="swiper-zoom-container">
               <img src="##"></div>
       </div>
       <div class="swiper-slide">
           <div class="swiper-zoom-container">
               <img src="###"></div>
       </div>
   </div>
</div>

 
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 回调函数，自动切换结束时执行（由自动切换进入到不自动切换）可用于脑洞效果有自动播放到手动播放。