Swiper插件的简单使用
程序员文章站
2022-07-10 21:21:43
...
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;
}
五、所有样式都可以随意按照需求调整，如果想要对Swiper插件有更多的了解，请登录Swiper官网查看API文档
上一篇： vue使用swiper插件
下一篇： swiper轮播的引入和使用