开始使用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>
<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;
}
<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>
var mySwiper = new Swiper('.swiper-container', {
autoplay: {
delay: 1000
},
});
--swiper-theme-color
或单独设置按钮风格--swiper-navigation-color
来改变按钮颜色。--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;
}