swiper实现轮播图效果
使用步骤
- 加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或者使用CDN。
<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>Document</title>
<link href="../swiper-5.2.0/package/css/swiper.min.css" rel="stylesheet">
</head>
2.body中的内容
<div class="swiper-container" style="width: 800px; height: 300px;">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="../swiper-5.2.0/demos/images/nature-1.jpg"></div>
<div class="swiper-slide" data-swiper-autoplay="3000"><img src="../swiper-5.2.0/demos/images/nature-2.jpg"></div>
<div class="swiper-slide"><img src="../swiper-5.2.0/demos/images/nature-3.jpg"></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>
3.初始化过程
<script>
var mySwiper = new Swiper ('.swiper-container', {
autoHeight: true, //高度随内容变化
speed:300, //设置滑动切换的时间(毫秒)
roundLengths:true, //设置为true,则将slide的宽和高取整(四舍五入),以防止某些分辨率的屏幕上文字或边界(border)模糊。
grabCursor : true, //设置为true时,鼠标覆盖Swiper时指针会变成手掌形状,拖动时指针会变成抓手形状
direction: 'horizontal', //Slides的滑动方向,可设置水平(horizontal)或垂直(vertical)。可使用swiper.changeDirection()方法动态切换方向。
loop: true, // 循环模式选项
autoplay:{ //设置自动播放
delay:2000, //时间间隔(毫秒)
disableOnInteraction:false //用户操作swiper之后,是否禁止autoplay。默认为true:停止。
},
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
// scrollbar: {
// el: '.swiper-scrollbar',
// },
})
</script>
- 可以自己设置swiper-container的宽和高。需要添加功能直接在初始化中添加