11-Swiper

Swiper

Swiper是一个开源免费移动触摸滑块，具有硬件加速过渡和高性能，并非兼容所有平台，仅专注于现代应用程序/平台

获取Swiper

从官网获取完整文件，点击相应的文件后跳转查看文件页面，再点击View Raw按钮，可以复制粘贴到自己本地建立的文件中，也可使用右击连接地址选择另存为下载至本地，如果外网比较慢可以上中文网

文件名	描述
swiper-bundle.min.css	核心压缩的css文件
swiper-bundle.min.js	核心压缩的js文件

基本使用

要求所有DOM加载完成后再初始化Swiper，否则会没有效果

<link rel="stylesheet" href="./lib/swiper-6.3.5/swiper-bundle.min.css">	<!-- 引入CSS -->
<script src="./lib/swiper-6.3.5/swiper-bundle.min.js"></script>	<!-- 引入js -->

<div class="swiper-container">	<!-- 滑块组件容器 -->
    <div class="swiper-wrapper">	<!-- 幻灯片容器 -->
        <div class="swiper-slide">Slide 1</div>	<!-- 幻灯片1 -->
        <div class="swiper-slide">Slide 2</div>	<!-- 幻灯片2 -->
        <div class="swiper-slide">Slide 3</div>	<!-- 幻灯片3 -->
    </div>
    <div class="swiper-button-next"></div>	<!-- 下一张按钮 -->
    <div class="swiper-button-prev"></div>	<!-- 上一张按钮 -->
    <div class="swiper-pagination"></div>	<!-- 分页器 -->
    <div class="swiper-scrollbar"></div>	<!-- 进度条 -->
</div>
<script>
    new Swiper('.swiper-container', {	//传入滑块组件的选择器，初始化Swiper
        navigation: {	//
            nextEl: ".swiper-button-next",	//上一张按钮的选择器
            prevEl: ".swiper-button-prev",	//下一张按钮的选择器
        },
        pagination: {	//分页器配置
          el: ".swiper-pagination"	//分页器的选择器
        },
        scrollbar: {	//进度条配置
        el: ".swiper-scrollbar",	//进度条选择器
      }
    })
</script>

常用配置参数

基本配置

配置项	数据类型	默认值	描述	启用版本
initialSlide	number	0	初始化后显示的第一张幻灯片	4.0.0
direction	string	horizontal	滑动方向，设置vertical为垂直方向	3.0.0，2.0.0是叫mode
speed	number	300	滑动速度，单位毫秒	2.0.0
loop	boolean	false	是否开启循环模式	2.0.0
noSwipingSelector	string	无	幻灯片中不可滑动的元素选择器	2.0.0

自动切换

配置项	数据类型	默认值	描述	启用版本
autoplay	boolean/object	false	是否开启自动切换，默认切换时间是3000毫秒，可接收切换对象	2.0.0，3.0.0及以下数据类型为number，默认0，设置的切换时间
delay	number	3000	自动切换时间，单位毫秒（切换对象中设置）	4.0.0
disableOnInteraction	boolean	true	触碰后停止切换（切换对象中设置）	4.0.0

小组件

分页器

配置项	数据类型	默认值	描述	启用版本
clickable	boolean	false	分页器小圆点是否可点击控制幻灯片	3.0.0，2.0.0是叫paginationClickable
dynamicBullets	boolean	false	是否开启渐远式小圆点	4.0.0
dynamicMainBullets	number	1	渐远式中的主圆点个数	4.0.0
hideOnClick	boolean	false	是否开启点击隐藏分页器	4.0.0

导航按钮

配置项	数据类型	默认值	描述	启用版本
hideOnClick	boolean	false	是否开启点击隐藏导航按钮	4.0.0

滚动条

配置项	数据类型	默认值	描述	启用版本
draggable	boolean	false	是否开启滚动条拖动	2.0.0
dragSize	number	auto	滚动条大小	2.0.0

鼠标和键盘

配置项	数据类型	默认值	描述	启用版本
keyboard	boolean	false	是否键盘方向键控制	4.0.0，3.0.0及其以下叫keyboardControl
mousewheel	boolean	false	是否鼠标滚轮控制	2.0.0，3.0.0及其以下叫mousewheelControl

分组模式

配置项	数据类型	默认值	描述	启用版本
slidesPerView	number	1	一屏所显示的幻灯片个数	2.0.0
slidesPerGroup	number	1	幻灯片分组，多张幻灯片看成一个，配合slidesPerView使用	2.0.0
slidesPerGroupSkip	number	0	跳过分组，即前几个不是分组的幻灯片	4.0.0
spaceBetween	number	0	幻灯片间距	3.0.0

自由模式

配置项	数据类型	默认值	描述	启用版本
freeMode	boolean	false	是否开启自由滑动模式	2.0.0
freeModeSticky	boolean	false	是否开启幻灯片边缘贴合	3.0.0
freeModeMomentum	boolean	true	是否开启惯性	3.0.0，2.0.0是叫freeModeFluid而且默认为false
freeModeMomentumRatio	number	1	惯性时长，单位秒	3.0.0，2.0.0是叫momentumRatio
freeModeMomentumBounceRatio	number	1	反弹效果力度	3.0.0，2.0.0是叫momentumBounceRatio

切换后执行动画

Swipe支持jQueryHTML标签属性、CSS样式属性、内容属性（无val()方法）、自定义属性、自定义事件、少量DOM操作、部分过滤器函数（无siblings()方法，可用prevAll()和nextAll()模拟）

new Swiper('.swiper-container', {
  on: {
    init: function (swiper) {	//Swiper初始化后执行一次
      //swiper参数就是该实例对象，也是this
      var active = swiper.activeIndex;	//获取当前活跃的幻灯片索引
      var slide = swiper.slides.eq(active);	//获取活跃状态下的那个幻灯片
      //slides是Swiper对象，类似jQuery对象，存储着所有幻灯片元素
      
      slide.prevAll().children(".son").css('visibility', "hidden");
      slide.children(".son").css('visibility', "visible");	//除啦当前幻灯片中的动画元素可见外，其他幻灯片的动画元素不可见
      slide.nextAll().children(".son").css('visibility', "hidden");
      
      slide.children(".son").addClass("animated");	//为该活跃状态下幻灯片要做动画的子元素，添加帧动画class名
    },
    transitionStart: function (swiper) {	//过渡开始时触发，也就是滑动松手时触发
      //swiper参数就是该实例对象，也是this
      var slides = swiper.slides;	//获取所有所有幻灯片的Swiper对象
      swiper.slides.children(".son").removeClass('animated');	//删除所有要做动画的子元素的帧动画class名
      
      var active = swiper.activeIndex;	//获取当前活跃的幻灯片索引
      var slide = swiper.slides.eq(active);	//获取活跃状态下的那个幻灯片
      
      slide.prevAll().children(".son").css('visibility', "hidden");
      slide.children(".son").css('visibility', "visible");	//除啦当前幻灯片中的动画元素可见外，其他幻灯片的动画元素不可见
      slide.nextAll().children(".son").css('visibility', "hidden");
      
      slide.children(".son").addClass('animated');	//为该活跃状态下幻灯片要做动画的子元素，添加帧动画class名
    },
    transitionEnd: function (swiper) {	//过渡结束时触发，也就是整个切换结束后触发
      //swiper参数就是该实例对象，也是this
      
    }
  }
})

有大量冗余代码，可以抽离成一个单独的一个方法

/*
*swiper: swiper对象
*selecter: 要做动画的子元素选择器
*className: 帧动画类名
*/
function ani(swiper,selecter,className){
  var slides = swiper.slides;	//获取所有所有幻灯片的Swiper对象
  swiper.slides.children(selecter).removeClass(className);	//删除所有要做动画的子元素的帧动画class名

  var active = swiper.activeIndex;	//获取当前活跃的幻灯片索引
  var slide = swiper.slides.eq(active);	//获取活跃状态下的那个幻灯片

  slide.prevAll().children(selecter).css('visibility', "hidden");
  slide.children(selecter).css('visibility', "visible");	//除啦当前幻灯片中的动画元素可见外，其他幻灯片的动画元素不可见
  slide.nextAll().children(selecter).css('visibility', "hidden");

  slide.children(selecter).addClass(className);	//为该活跃状态下幻灯片要做动画的子元素，添加帧动画class名
}
new Swiper('.swiper-container', {
  on: {
    init: function (swiper) {	//Swiper初始化后执行一次
      ani(swiper,".son","animated");
    },
    transitionStart: function (swiper) {	//过渡开始时触发，也就是滑动松手时触发
      ani(swiper,".son","animated");
    }
  }
})

CSS3帧动画库

动画使用CSS帧动画实现，可使用animate.css，可从官方GitHub上获取历史版本

• 要想使animate.css中的帧动画生效必须加animated类
• 想要动画重复无限重复执行则添加infinite类
  • 指定重复次数：添加repeat-*类（只有1，2，3值可取）
    • 可设置css变量--animate-repeat来指定倍数，比如：设置为2，所有重复类都会乘以2，也可是小数
  • 指定延时时间：添加delay-*s类（只有2，3，4，5值可取）
    • 可设置css变量--animate-delay来指定倍数，比如：设置为2s，所有延时类都会乘以2s，也可是小数
  • 指定动画执行速度：可选择添加这些类slow（2s）、slower（3s）、fast（800ms）、faster（500ms）
    • 可设置css变量--animate-duration来指定倍数，比如设置为2s，所有重复类都会乘以2s，也可是小数
• animate.css的4.0版本中又将所有的类名增加了animate__的前缀（两个短横线）