代码示例:
//css
// @charset "utf-8";
#certify {
position: relative;
width: 471px;
height: 441px;
margin-left: 35px;
// width: 1200px;
// margin: 0 auto
}
#certify .swiper-container {
padding-top: 40px
}
#certify .swiper-slide {
width: 228px;
height: 378px;
overflow: hidden;
background: #fff;
box-shadow: 0 8px 30px #ddd
}
#certify .swiper-slide img {
width: 100%;
display: block
}
#certify .swiper-slide p {
line-height: 98px;
padding-top: 0;
text-align: center;
color: #636363;
font-size: 1.1em;
margin: 0
}
#certify1 {
float: right;
width: 4.5rem;
height: auto;
position: relative;
top: 0.72rem;
}
#certify1 .swiper-slide {
width:4rem;
height:auto;
overflow: hidden;
background: #fff;
box-shadow: 0 8px 30px #ddd
}
#certify1 .swiper-slide img {
width: 100%;
display: block
}
html
<div id="certify1">
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- <div class="swiper-slide"><img src="img/pc/pc_photo_home_Features_1.png" /></div>
<div class="swiper-slide"><img src="img/pc/pc_photo_home_Features_2.png" /></div>
<div class="swiper-slide"><img src="img/pc/pc_photo_home_Features_3.png" /></div>
<div class="swiper-slide"><img src="img/pc/pc_photo_home_Features_4.png" /></div>
<div class="swiper-slide"><img src="img/pc/pc_photo_home_Features_5.png" /></div> -->
<% section2Info.block2.img.forEach(function(item){%>
<div class="swiper-slide"><img src="<%=item %>" /> </div>
<% }) %>
</div>
</div>
</div>
js
//pc 的轮播
var certifySwiper = new Swiper('#certify .swiper-container', {
watchSlidesProgress: true,
slidesPerView: 'auto',
centeredSlides: true,
loop: true,
// autoplay: true,
//这样写是为了防止手动滚动之后 自动滚动就失效了
autoplay: {
disableOnInteraction: false,
delay:2000,
},
loopedSlides: 5,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
//clickable :true,
},
on: {
progress: function (progress) {
for (var i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i);
var slideProgress = this.slides[i].progress;
var modify = 1;
if (Math.abs(slideProgress) > 1) {
modify = (Math.abs(slideProgress) - 1) * 0.1 + 1;
}
// var translate = slideProgress * modify * 114 + 'px';
var translate = slideProgress * modify * 150 + 'px';
var scale = 1 - Math.abs(slideProgress) / 7;
var 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);
}
}
}
})
示例
<div id="certify1">
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- <div class="swiper-slide"><img src="img/pc/pc_photo_home_Features_1.png" /></div>
<div class="swiper-slide"><img src="img/pc/pc_photo_home_Features_2.png" /></div>
<div class="swiper-slide"><img src="img/pc/pc_photo_home_Features_3.png" /></div>
<div class="swiper-slide"><img src="img/pc/pc_photo_home_Features_4.png" /></div>
<div class="swiper-slide"><img src="img/pc/pc_photo_home_Features_5.png" /></div> -->
<% section2Info.block2.img.forEach(function(item){%>
<div class="swiper-slide"><img src="<%=item %>" /> </div>
<% }) %>
</div>
</div>
</div>
//msite 的轮播
var certifySwiper1 = new Swiper('#certify1 .swiper-container', {
watchSlidesProgress: true,
slidesPerView: 'auto',
centeredSlides: false,
loop: true,
// autoplay: true,
autoplay: {
disableOnInteraction: false,
delay:2000,
},
loopedSlides: 5,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
//clickable :true,
},
on: {
progress: function (progress) {
for (var i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i);
var slideProgress = this.slides[i].progress;
var modify = 1;
if (Math.abs(slideProgress) > 1) {
modify = (Math.abs(slideProgress) - 1) * 0.1 + 1;
}
// var translate = slideProgress * modify * 114 + 'px';
var translate = slideProgress * modify * 150 + 'px';
var scale = 1 - Math.abs(slideProgress) / 7;
var 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);
}
}
}
})