版权声明:我写的你不能转载,但是你可以复制啊。复制记得加关注啊(迷之微笑)。 https://blog.csdn.net/quhongqiang/article/details/85044761
<link rel="stylesheet" type="text/css" href="https://www.swiper.com.cn/dist/css/swiper.min.css">
body {
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
padding-top: 10px;
padding-bottom: 30px;
}
.swiper-slide {
background-position: center;
background-size: cover;
width: 240px;
height: 320px;
}
.swiper-slide img{
width: 100%;
height: 100%;
}
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="http://www.yuetuvip.com/img/banner4.jpg" >
</div>
<div class="swiper-slide">
<img src="http://www.yuetuvip.com/img/banner4.jpg" >
</div>
<div class="swiper-slide">
<img src="http://www.yuetuvip.com/img/banner4.jpg" >
</div>
<div class="swiper-slide">
<img src="http://www.yuetuvip.com/img/banner4.jpg" >
</div>
</div>
</div>
<script src="https://www.swiper.com.cn/dist/js/swiper.min.js"></script>
<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container', {
effect: 'coverflow', //3d滑动
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
loop:true,
slidesPerView: 2,
coverflow: {
rotate: 0, //设置为0
stretch: 0,
depth: 200,
modifier: 2,
slideShadows : true
}
});
</script>
欢迎讨论!!~~~