<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>swiper</title>
<!-- //引入swiper -->
<link rel="stylesheet" href="./插件/swiper-5.0.4/package/css/swiper.min.css">
<style>
.banner {
text-align: center;
}
.box1,
.box2,
.box3 {
width: 100%;
height: 400px;
line-height: 400px;
background: red;
}
.box2 {
background: green;
}
.box3 {
background: yellow;
}
</style>
</head>
<body>
<!-- 使用 -->
<div class="swiper-container banner">
<div class="swiper-wrapper">
<div class="swiper-slide box1">Slide 1</div>
<div class="swiper-slide box2">Slide 2</div>
<div class="swiper-slide box3">Slide 3</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>
<script src="./插件/swiper-5.0.4/package/js/swiper.min.js"></script>
<script>
// swiper的下载地址:https://www.swiper.com.cn/download/index.html#file1
//这里使用最新的swiper5.x版本的
// 需要的文件 在package文件夹里
// 具体使用 参考官网:https://www.swiper.com.cn/api/event/84.html
// 1)初始化swiper实例
new Swiper('.banner', {
// autuplay: true, //自动播放 //默认3秒 可自定一设置
autoplay: {
delay: 1000,
stopOnLastSlide: false,
disableOnInteraction: true,
},
loop: true, // 循环模式选项
//使用分页器
pagination: {
el: '.swiper-pagination',
},
// 使用左右按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
</script>
</body>
</html>
1、Swipe轮播图插件的使用
最新推荐文章于 2024-01-09 13:14:10 发布