Swiper做轮播图
在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>swiper</title>
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
</head>
<style>
* {
margin: 0;
padding: 0;
}
.swiper-slide {
background-position: center;
background-size: cover;
width: 300px;
height: 250px;
}
img {
width: 100%;
height: 100%;
}
</style>
<body>
<div class="swiper-container">
<div class="swiper-wrapper"></div>
<div class="swiper-pagination"></div>
</div>
</body>
<script src="https://unpkg.com/swiper/js/swiper.min.js"> </script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
var swiperList = ['http://pic.51yuansu.com/backgd/cover/00/05/31/5b6294989be88.jpg',
'http://pic.51yuansu.com/backgd/cover/00/56/38/5c6cefa1cc2fb.jpg',
'http://pic.51yuansu.com/backgd/cover/00/41/86/5becb3686e4e8.jpg',
'http://pic.51yuansu.com/backgd/cover/00/03/66/5b5b0a492f035.jpg']
var item = ""
for (let i in swiperList) {
item += `<div class="swiper-slide"><img src="${swiperList[i]}" alt=""></div>`
}
$('.swiper-wrapper').append(item)
var swiper = new Swiper('.swiper-container', {
keyboard: true,
loop: true,
autoplay: true,
effect: 'coverflow',
centeredSlides: true,
slidesPerView: 'auto',
coverflowEffect: {
rotate: 0,
stretch: -20,
depth: 100,
modifier: 1,
slideShadows: true
},
observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: true,//修改swiper的父元素时，自动初始化swiper
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
</script>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-12-17 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读