swiper概述
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端
主要是实现轮播图效果
swiper5使用
<link rel="stylesheet" href="css/swiper.min.css">
<style>
.swiper-container{
width: 640px;
height: 320px;
}
img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img/1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img/2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img/3.jpg" alt="">
</div>
</div>
</div>
<script src="script/swiper.min.js"></script>
<script>
new Swiper('.swiper-container')
</script>
</body>
可以按住鼠标左右滑动
但是还少了一些组件，上swiper中文网查阅文档
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img/1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img/2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img/3.jpg" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<script src="script/swiper.min.js"></script>
<script>
new Swiper('.swiper-container',{
pagination:{
el:'.swiper-pagination',
},
})
</script>
可以看到多了个分页器
接着加些组件
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img/1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img/2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img/3.jpg" alt="">
</div>
</div>
<!-- 如果需要分页按钮 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script src="script/swiper.min.js"></script>
<script>
new Swiper('.swiper-container',{
loop: true, // 循环模式选项
pagination:{
el:'.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
</script>
