console
var mySwiper = new Swiper('.swiper-container', {
speed: 1000,
loop: true,
// autoplay: true,//等同于以下设置
autoplay: {
delay: 1000,
stopOnLastSlide: true,
disableOnInteraction: true, //用户操作之后是否停止自动轮播默认true
},
// slidesPerView: 1,//显示滑动页面显示几个图
// centeredSlides: true,
direction: 'horizontal', //horizontal 横 vertical 竖
slidesPerView: 1,
// loopAdditionalSlides: 3,
});
<body class='bg'>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class='bg1'></div>
</div>
<div class="swiper-slide">
<div class='bg2'></div>
</div>
<div class="swiper-slide">
<div class='bg3'></div>
</div>
</div>
</div>
</body>
.bg {
background-color: #1d428a;
}
.swiper-container {
position: absolute;
top: 30%;
left: 40%;
width: 7rem;
height: auto;
background-color: #ff5214;
overflow: hidden;
}
.swiper-wrapper {
}
.swiper-slide {
width: auto;
height: auto;
}
.swiper-slide .bg1{
width: 6.39rem;
height: 4.07rem;
background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/158426/18/6329/66802/601ce42bE6111d955/1825af4d03606d3b.png);
background-size: 100%;
}
.swiper-slide .bg2{
width: 6.39rem;
height: 4.07rem;
background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/155999/23/8910/58299/601ce42bE40f5d6d7/7fa6aae9239077a0.png);
background-size: 100%;
}
.swiper-slide .bg3{
width: 6.39rem;
height: 4.07rem;
background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/168320/11/5643/59634/601ce42bEa1a5cc28/32c8728d667df277.png);
background-size: 100%;
}