1.按照官網(wǎng)正常創(chuàng)建swiper
2.樣式部分
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide img{
width:100%;
height:auto;
min-height:100%;
transition:1s linear 2s;
transform:scale(1.1,1.1);
}
.swiper-slide-active img,.swiper-slide-duplicate-active img{
transition:6s linear;
transform:scale(1,1);
}
3.js部分
var swiper = new Swiper('.swiper-container', {
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
speed:500,
spaceBetween: 30,
effect: 'fade',
loop:true,//必須
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
