Swiper插件的简单使用
- Swiper插件是用来写轮播图的插件，十分简洁方便。可以直接去Swiper官网下载并点击
开始使用Swiper按钮查看使用方法，这里只介绍简单引用的方法。 - 本文所写内容在官网均有详细介绍。
文章图片
文章图片
一、下载并引入文件
- 可以直接登录官网下载，如果安装了
Nodejs环境也可以打开编译器终端利用npm i swiper下载 - 将文件放到你喜欢的路径，并分别引入
css和js文件
...
...
src="https://www.it610.com/article/dist/js/swiper.min.js">
...
二、html内容
![JS|Swiper插件的简单使用]()
文章图片
![JS|Swiper插件的简单使用]()
文章图片
![JS|Swiper插件的简单使用]()
文章图片
- 可以利用原有类名或者自己添加的
class类名来将轮播图修改为自己喜欢的样式 - 例如修改轮播图大小
.swiper-container {
width: 600px;
height: 300px;
}
三、JavaScript内容
>
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',
},
})
