Swiper使用
文章描述：
如何在网站里面使用Swiper
Swiper初始化
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">slider1</div>
<div class="swiper-slide">slider2</div>
<div class="swiper-slide">slider3</div>
</div>
</div>
<script>
var mySwiper = new Swiper('.swiper-container', {
autoplay: 5000,//可选选项，自动滑动
})
</script>Pagination（分页器）
<div class="swiper-container">
<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>
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
pagination : '.swiper-pagination',
//pagination : '#swiper-pagination1',
})
</script>Navigation Buttons（前进后退按钮）
修改箭头颜色示范：https://3.swiper.com.cn/api/Navigation_Buttons/2015/0308/209.html
<div class="swiper-container">
<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-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
prevButton:'.swiper-button-prev',
nextButton:'.swiper-button-next',
})
</script>loop（环路）
<script>
var mySwiper = new Swiper('.swiper-container',{
loop : true,
})
/*如果只有一个slide就锁住swiper
if(mySwiper.slides.length<=3){
mySwiper.lockSwipes();
}*/
</script>
发布时间：2023/03/06
发表评论