swiper插件如何使用？

Swiper网址: 官方网址

 

---

SWIPER使用方式介绍

1. 下载相关js文件

进入官方首页进行点击获取Swiper -> 下载Swiper

网址: 下载Swiper - Swiper中文网

 一般找到最新版本 我这里以

为准

如果大家是黑马网课 建议下载swiper6的版本

直接点击你需要你版本自动进行下载

 先解压放到桌面

 

找到package文件夹打开

 只需要一个js文件和一个css文件(图中圈出)

 

自己放到自己相放入的文件夹，但前提是你引用的时候能找到，附上我放的位置

 (放入的是VScode中)

---

2. 引入刚刚准备好的插件

分别在头部和尾部引入css和js

 

---

3. 寻找需求的样式进行添加

3.1 在刚刚下载的文件中寻找

位置在: demos文件夹中

 

这里面对应的都是一些轮番图的样式。

随机延时一份

 

建议在无网络时添加 该方法优先使用，网页有时候有问题。

可以先在网页找好，去对应文件找名字就行了!!

也是同样是 打开文件 右击查看源代码

3.2 在官网中寻找合适的样式(详细介绍)

随便找一个样式，并且点击在新窗口打开

 

右击 - >  查看网页源代码

注意: 需要复制的地方不再叙述，统一红色标记，最后自己再根据自己的喜爱去更改!!!!!

 

样式 结构 依次导入即可 

注意js编写的代码，要放在引入js插件的下面才行

展示效果

 

---

 

总结: 网页进行结构复制的时候，有时候有问题，建议使用文件的方式。(亲测有效!)