<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="dist/css/swiper-bundle.min.css">
</head>
<body>
...
<script src="dist/js/swiper-bundle.min.js"></script>
...
</body>
</html>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<div class="swiperBtn" onclick="onadd()"> </div>
<div class="swiperBtn_r" onclick="add()"> </div>
</div>
<style>
.swiper {
width: 600px;
height: 300px;
}
</style>
<script>
var mySwiper = new Swiper ('.swiper', {
direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
})
function onadd() {
// console.log('切换到上一张轮播图');
mySwiper.slidePrev();
}
function add() {
// console.log('切换到下一张轮播图');
// 切换到下一张轮播图
mySwiper.slideNext();
}
</script>
注:按钮的样式自己设置,我的是一个背景图