swiper轮播图滚动
1.安装swiper
官网:Swiper中文网-轮播图幻灯片js插件,H5页面前端开发
**注意:**下载插件【要@5.x】,不然会出现各种BUG。
npm i swiper@5.x vue-awesome-swiper@4.1.1 -S
2.HTML代码
html
<div class="examples">
<div class="swiper-container">
<div class="swiper-wrapper">
<div
class="swiper-slide"
v-for="(item, index) in clist"
:key="index"
>
<img :src="item.imgUrl" alt="" />
</div>
</div>
</div>
</div>
3.JS代码
html
<script>
import Swiper from "swiper";
import "swiper/css/swiper.css";
export default {
data () {
return {
clist: [
{
imgUrl: require('/src/assets/images/certify01.png')
},
{
imgUrl: require('/src/assets/images/certify02.png')
},
{
imgUrl: require('/src/assets/images/certify03.png')
}
],
}
},
mounted() {
this.firingSwiper()
},
methods:{
// 启动Swiper(轮播图)
firingSwiper() {
new Swiper(".swiper-container", {
direction: "horizontal", //滑动方向,可设置水平(horizontal)或垂直(vertical)。
loop: true, // 设置为true 则开启loop模式 衔接滑动
// 自动滑动
autoplay: {
delay: 2000,
stopOnLastSlide: false, // 如果设置为true,当切换到最后一个slide时停止自动切换。
disableOnInteraction: false // 如果设置为false,用户操作swiper之后自动切换不会停止,每次都会重新启动autoplay
},
effect: "coverflow", // 切换效果 "coverflow"(3d流)
slidesPerView: "auto", // 设置slider容器能够同时显示的slides数量(carousel模式)。类型:number or auto
centeredSlides: true, // 设定为true时,active slide会居中,而不是默认状态下的居左。
spaceBetween: 10, // 在slide之间设置距离(单位px)。
slideToClickedSlide: true, // 设置为true则点击slide会过渡到这个slide。
// loopAdditionaSlider: 0, // loop模式下会在slides前后复制若干个slide,,前后复制的个数不会大于原总个数。
coverflowEffect: {
rotate: 0, // slide做3d旋转时Y轴的旋转角度
stretch: 0, // 每个slide之间的拉伸值,越大slide靠得越紧。5.3.6 后可使用%百分比
depth: 60, // slide的位置深度。值越大z轴距离越远,看起来越小。
modifier: 5, // depth和rotate和stretch的倍率,相当于depth*modifier、rotate*modifier、stretch*modifier,值越大这三个参数的效果越明显。
slideShadows: true // 是否开启slide阴影
}
});
},
}
}
</script>
4.css代码
html
<style>
// 自定义轮播图
.examples {
margin-top: 0.6rem;
overflow: auto;
}
.swiper-container {
width: 100%;
}
.swiper-container .swiper-wrapper .swiper-slide {
width: 206px !important;
overflow: hidden;
display: flex;
align-items: center;
}
.swiper-container .swiper-wrapper .swiper-slide img {
width: 100%;
height: 256px;
border-radius: 12px;
}
</style>