开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第20天，点击查看活动详情第25篇文 Swiper 是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端，我们只需要从官网学习如何使用，改吧改吧就能得到一个好看的轮播图，大大减少了代码量，下面我们就用swiper写一个轮播图，来看看它到底有多好用…..

认识swiper

swiper的特点

Swiper是纯Javascript打造的滑动特效插件，面向手机、平板电脑等移动终端
Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择

安装Swiper

npm install Swiper@6
cnpm install Swiper@6
yarn add Swiper@6

引用文件

import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";

然后想要什么样的效果就从官网粘贴过来，初始化swiper，调试一下就行了，下面我们看具体的例子

效果

我们要实现的效果

轮播
点击左右箭头可以进行切换
点击分页器也可以进行切换
当鼠标移到图片上时，停止轮播

以下是实现好的效果

实现思路

HTML

为了减少代码量，这里我们删掉不必要的东西，主体结构如以下代码所示

<body>
<div class="swiper-container" id="container1">
<!-- 轮播图 -->
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://www.ge69.com/images/banner01.png" >
</div>
<div class="swiper-slide">
<img src="https://www.ge69.com/images/banner02.jpg" >
</div>
<div class="swiper-slide">
<img src="https://www.ge69.com/images/banner03.png" >
</div>
<div class="swiper-slide">
<img src="https://www.ge69.com/images/banner04.png" >
</div>
<div class="swiper-slide">
<img src="https://www.ge69.com/images/banner05.png" >
</div>
</div>
<!-- 分页器 -->
<div class="swiper-pagination"></div>
<!-- 导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<!-- IMPORT JS -->
<script src="https://www.ge69.com/js/swiper-bundle.min.js"></script>
<script src="https://www.ge69.com/js/index.js"></script>
</body>

JS

思路

基础配置
- initialSlide: 2,默认0 设定初始化时slide的索引 [跟克隆的索引无关显示的真实的索引]
- direction: ‘horizontal’, 水平切换选项 horizontal[水平] vertical[垂直]
- speed: 300,每一次切换的动画时间 300ms
- grabCursor: true,鼠标滑上去有手指
- loop: true, 开启循环切换[左右运动实现无缝衔接] 注意索引因为克隆两张的原因，发生改变了
- effect:’fade’,切换效果：slide[位移] fade[淡入] cube[方块] coverflow[实现3D流] flip翻转
自动轮播
- delay: 3000,间隔多长时间切换一次
- stopOnLastSlide: false,如果设置为true，当切换到最后一个slide时停止自动切换。loop模式下无效
分页器
- type:’bullets’ 分页器样式bullets[圆点默认] bullets[分式] progressbar[进度条]
- clickable: true 点击分页器的指示点分页器会控制Swiper切换
前进后退按钮
事件监听【回调函数】
- swiper当前创造的这个类的实例
- swiper属性
  - activeIndex 包含克隆的索引
  - realIndex 真实的索引
  - slides 显示的轮播图
自己控制鼠标进入/离开容器，同时管控自动轮播的暂停和继续
- 当鼠标点上去要暂停轮播图
- 当鼠标离开的时候要继续轮播

代码实现

let sw1 = new Swiper('#container1', {
direction: 'horizontal',
speed: 300,
loop: true,
effect:'fade',
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false
},
pagination: {
el: '.swiper-pagination',
//type:'bullets' //bullets[圆点默认]  bullets[分式] progressbar[进度条]
clickable: true
},
navigation: {
prevEl: '.swiper-button-prev',
nextEl: '.swiper-button-next'
},
on:{
init(swiper){
console.log('初始化完成');
},
transitionEnd(swiper){
let {activeIndex,realIndex,slides} =swiper;
console.log('切换完成',activeIndex,realIndex,slides);
}
}
});
let container=document.querySelector('#container1');
container.addEventListener('mouseenter',()=> sw1.autoplay.stop());
container.addEventListener('mouseleave',()=> sw1.autoplay.start());

------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。

版权声明 1、本网站名称：销魂博客
2、本站永久网址：https://www.xhybk.com
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ719371979进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END