css:
记得引入swiper.css和swiper.js
.swiper-container {
margin-top: .1rem;
width: 3.75rem;
height: 2rem;
overflow: visible !important;
}
.swiper-container .swiper-wrapper .swiper-slide {
width: 3.1rem;
border-radius: 20px;
}
.swiper-container .swiper-wrapper .swiper-slide img {
width: 100%;
height: 2rem;
border-radius: .1rem;
}
.swiper-container .swiper-wrapper .swiper-slide-prev {
height: 2rem !important;
}
.swiper-container .swiper-wrapper .swiper-slide-prev img {
height: 2rem !important;
}
.swiper-container .swiper-wrapper .swiper-slide-next {
height: 2rem !important;
}
.swiper-container .swiper-wrapper .swiper-slide-next img {
height: 2rem !important;
}
.swiper-container .swiper-wrapper .swiper-slide-active {
width: 3.1rem;
}
html:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/time.jpg" /></div>
<div class="swiper-slide"><img src="./img/time.jpg" /></div>
<div class="swiper-slide"><img src="./img/time.jpg" /></div>
<div class="swiper-slide"><img src="./img/time.jpg" /></div>
</div>
</div>
js:
<script src="./js/swiper.js"></script>
<script>
window.onload = function () {
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal',
loop: true,
autoplay: 5000,
slidesPerView: "auto",
centeredSlides: true,
spaceBetween: 10,
})
}
</script>