Swiper插件的简单使用
- Swiper插件是用来写轮播图的插件，十分简洁方便。可以直接去Swiper官网下载并点击
开始使用Swiper按钮查看使用方法，这里只介绍简单引用的方法。 - 本文所写内容在官网均有详细介绍。
一、下载并引入文件
- 可以直接登录官网下载，如果安装了
Nodejs环境也可以打开编译器终端利用npm i swiper下载 - 将文件放到你喜欢的路径，并分别引入
css和js文件
<!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href="dist/css/swiper.min.css"> </head> <body> ... <script src="dist/js/swiper.min.js"></script> ... </body> </html>
二、html内容
<div class="swiper-container"> <div class="swiper-wrapper"> <!-- 这里插入图片 轮播图1，2，3--> <div class="swiper-slide"> <img src="" alt=""> </div> <div class="swiper-slide"> <img src="" alt=""> </div> <div class="swiper-slide"> <img src="" alt=""> </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> <!--导航等组件可以放在container之外 -->
- 可以利用原有类名或者自己添加的
class类名来将轮播图修改为自己喜欢的样式 - 例如修改轮播图大小
.swiper-container {width: 600px; height: 300px; }
三、JavaScript内容
<script> var mySwiper = new Swiper ('.swiper-container', { direction: 'vertical', // 垂直切换选项 loop: true, // 循环模式选项 // 如果需要分页器 pagination: { el: '.swiper-pagination', }, // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // 如果需要滚动条 scrollbar: {el: '.swiper-scrollbar',}, }) </script></body>
四、根据自己的需求设置轮播图
上图是插入图片后的Swiper轮播图，左右两侧为导航按钮，正下方圆点为分页器，右下角为滚动条。
1、设置轮播图自动切换
- 放在script标签中 表示自动切换 每隔1000ms切换一次
var mySwiper = new Swiper('.swiper-container', { autoplay: { delay: 1000 }, });
2、修改前进、后退按钮样式
swiper5新增可以通过设置Swiper的风格--swiper-theme-color或单独设置按钮风格--swiper-navigation-color来改变按钮颜色。
swiper5新增可以通过设置--swiper-navigation-size来调整按钮大小，默认是44px。
<!-- 分别为 前进 后退 按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div>
.swiper-button-prev{ --swiper-theme-color:red; --swiper-navigation-size:20px; }
