<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper横向切换</title>
<link rel="stylesheet" href="./css/swiper.min.css">
<script src="./js/swiper.min.js"></script>
<style>
#imagesShow {
position: relative;
width: 1200px;
margin: 0 auto;
}
#imagesShow .swiper-container {
padding-bottom: 60px;
}
#imagesShow .swiper-slide {
width: 520px;
height: 408px;
background: #fff;
box-shadow: 0 8px 30px #ddd;
}
#imagesShow .swiper-slide img {
display: block;
width: 520px;
height: 408px;
}
#imagesShow .swiper-pagination {
width: 100%;
bottom: 20px;
}
#imagesShow .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 5px;
border: 3px solid #fff;
background-color: #d5d5d5;
width: 10px;
height: 10px;
opacity: 1;
}
#imagesShow .swiper-pagination-bullets .swiper-pagination-bullet-active {
border: 3px solid #00aadc;
background-color: #fff;
}
#imagesShow .swiper-button-prev:hover {
background-color: #eef7fa;
}
#imagesShow .swiper-button-next:hover {
background-color: #eef7fa;
}
</style>
</head>
<body>
<div id="imagesShow">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./images/images-show01.jpg"/></div>
<div class="swiper-slide"><img src="./images/images-show02.jpg"/></div>
<div class="swiper-slide"><img src="./images/images-show03.jpg"/></div>
<div class="swiper-slide"><img src="./images/images-show04.jpg"/></div>
<div class="swiper-slide"><img src="./images/images-show05.jpg"/></div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script>
imagesShowSwiper = new Swiper('#imagesShow .swiper-container', {
watchSlidesProgress: true,
slidesPerView: 'auto',
centeredSlides: true,
loop: true,
loopedSlides: 5,
autoplay: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
//clickable :true,
},
on: {
progress: function (progress) {
for (i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i);
var slideProgress = this.slides[i].progress;
modify = 1;
if (Math.abs(slideProgress) > 1) {
modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
}
translate = slideProgress * modify * 260 + 'px';
scale = 1 - Math.abs(slideProgress) / 5;
zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
slide.transform('translateX(' + translate + ') scale(' + scale + ')');
slide.css('zIndex', zIndex);
slide.css('opacity', 1);
if (Math.abs(slideProgress) > 3) {
slide.css('opacity', 0);
}
}
},
setTransition: function (transition) {
for (var i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i)
slide.transition(transition);
}
}
}
})
</script>
</body>
</html>
swiper横向循环图片
需积分: 5 45 浏览量
2024-04-30
10:40:43
上传
评论
收藏 2.22MB ZIP 举报
swiper横向循环图片.zip （10个子文件） 
swiper横向循环图片 
swiper.html 4KB js 
swiper.min.js 125KB css swiper.min.css 19KB images 
images-show01.jpg 343KB images-show05.jpg 564KB images-show03.jpg 693KB
icon1.png 7KB images-show02.jpg 586KB images-show04.jpg 57KB icon2.png 7KB资源评论
