swiper

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>swiper</title>
<link rel="stylesheet" href="css/swiper.css">
<style>
.box {
width: 500px;
background-color: orange;
margin: 200px auto;
}
.swiper-container {
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
}

.swiper-slide {
background-position: center;
background-size: cover;
width: 300px;
height: 300px;

}
</style>
</head>

<body>
<div class="box">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(img/001.jpg)"></div>
<div class="swiper-slide" style="background-image:url(img/001.jpg)"></div>
<div class="swiper-slide" style="background-image:url(img/001.jpg)"></div>
<div class="swiper-slide" style="background-image:url(img/001.jpg)"></div>
<div class="swiper-slide" style="background-image:url(img/001.jpg)"></div>
<div class="swiper-slide" style="background-image:url(img/001.jpg)"></div>
<div class="swiper-slide" style="background-image:url(img/001.jpg)"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</body>
<script src="js/swiper.js"></script>
<script>
new Swiper('.swiper-container', {
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
},
pagination: {
el: '.swiper-pagination',
},
});
</script>

</html>

posted @ 2018-10-25 15:24  不沉之月  阅读(122)  评论(0)  编辑  收藏  举报