移动端 Swiper

一、什么是swiper

1. 开源、免费、强大的触摸滑动插件

2. Swiper常用于移动端网站的内容触摸滑动

3. Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果

#二、如何使用

1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件

 <link rel="stylesheet" href="dist/css/swiper.min.css">
 
 <script src="dist/js/swiper.min.js"></script>

 

2.HTML内容

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>

 

3.初始化调用Swiper

 var mySwiper = new Swiper ('.swiper-container', {
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        

 

#三、Swiper常用属性

#initialSlide 初始下标

initialSlide:1 //显示第一个slide

 

#direction 轮播方向

direction:horizontal水平 | vertical垂直

 

#loop 是否循环

loop:true | false

 

#effect 切换效果

effect:'slide默认，位移' | 'fade淡入' | 'cube方块' | 'coverflow 3d流' | 'flip 3d翻转'

 

#autoplay 自动轮播

autoplay:true  等价于{
    delay:3000,  //每个滑块间隔的时间
    stopOnLastSlide:false,// 是否在最后就一个滑块停下来
    disableOnInteraction:true 如果手动的滑动  则会停止自动轮播
}

 

#pagination 分页器

pagination:{
    el:'',  //分页器类名
    type:'bullets圆点'|'fraction数字'|'progressbar进度条'//分页器样式
}

 

#on 注册事件

on: { //this指代Swiper实例
    slideChange: function () { //当发生切换时触发
      console.log(this.activeIndex); //当前下标
      console.log(this.previousIndex); //上一项下标
    },
    slideChangeTransitionStart:function(){ //切换动画开始执行前
        
    },
    slideChangeTransitionEnd:function(){ //切换动画执行结束后
        
    }
}

 

#swiper.slideTo(index,speed) 控制swiper切换到指定的slide

index 将要切换到的slide下标
speed 时间