两种效果,效果一:
效果图:
代码:
html:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="~@/static/images/getcard/getcard_1.png" /></div>
<div class="swiper-slide"><img src="~@/static/images/getcard/getcard_2.png" /></div>
<div class="swiper-slide"><img src="~@/static/images/getcard/getcard_3.png" /></div>
<div class="swiper-slide"><img src="~@/static/images/getcard/getcard_4.png" /></div>
<div class="swiper-slide"><img src="~@/static/images/getcard/getcard_5.png" /></div>
<div class="swiper-slide"><img src="~@/static/images/getcard/getcard_6.png" /></div>
<div class="swiper-slide"><img src="~@/static/images/getcard/getcard_7.png" /></div>
<div class="swiper-slide"><img src="~@/static/images/getcard/getcard_8.png" /></div>
<div class="swiper-slide"><img src="~@/static/images/getcard/getcard_9.png" /></div>
<div class="swiper-slide"><img src="~@/static/images/getcard/getcard_10.png" /></div>
<div class="swiper-slide"><img src="~@/static/images/getcard/getcard_11.png" /></div>
<div class="swiper-slide"><img src="~@/static/images/getcard/getcard_12.png" /></div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
js:
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal',
loop: true,
autoplay: 5000,
slidesPerView: "auto",
centeredSlides: true,
spaceBetween: 20,
})
css:
.swiper-container {
height: 557px;
width: 750px;
margin-top: 193px;
overflow: visible !important;
.swiper-wrapper {
.swiper-slide {
width: 443px;
img {
height: 557px;
width: 443px;
}
}
.swiper-slide-prev{ margin-top: 18px; height: 490px!important;}
.swiper-slide-prev img{ height: 490px!important;}
.swiper-slide-next{ margin-top: 18px; height: 490px!important;}
.swiper-slide-next img{ height: 490px!important;}
.swiper-slide-active{ width: 443px;}
}
}
效果二:
效果图:
html:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="~@/static/images/getcard/getcard_1.png" /></div>
<div class="swiper-slide"><img src="~@/static/images/getcard/getcard_2.png" /></div>
<div class="swiper-slide"><img src="~@/static/images/getcard/getcard_3.png" /></div>
<div class="swiper-slide"><img src="~@/static/images/getcard/getcard_4.png" /></div>
<div class="swiper-slide"><img src="~@/static/images/getcard/getcard_5.png" /></div>
<div class="swiper-slide"><img src="~@/static/images/getcard/getcard_6.png" /></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
js:
var swiper = new Swiper('.swiper-container', {
slidesPerView: 3,
spaceBetween: 30,
centeredSlides: true,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
css:
.swiper-container {
width: 100%;
height: 220px;
margin-top: 50px;
}
.swiper-slide {
text-align: center;
font-size: 18px;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
transition: 300ms;
transform: scale(0.8);
img{
height: 100%;
width: 100%;
}
}
.swiper-slide-active,
.swiper-slide-duplicate-active {
transform: scale(1);
}
注意事项:
swiper设置为自动滚动,但是用手滑动了之后,自动滚动就停止了,代码需这样写:
autoplay: {
disableOnInteraction: false,
delay: 5000,
}