<!DOCTYPE html>
<head>
<title>Swiper demo</title>
<!-- Link Swiper's CSS -->
../package/css/swiper.min.css">
<!-- Demo styles -->
<style>
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: auto;
padding:90px 0;
margin-left: auto;
margin-right: auto;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
height: 200px;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
transition-property:all;
}
#progressEffect{
position: absolute;
z-index: 10;
top: 20px;
left: 20px;
}
</style>
</head>
<body>
无效果</option>
缩放scale</option>
Y轴位移+透明度</option>
旋转rotate</option>
背景色</option>
</select>
<!-- Swiper -->
Slide 1</div>
Slide 2</div>
Slide 3</div>
Slide 4</div>
Slide 5</div>
Slide 6</div>
Slide 7</div>
Slide 8</div>
Slide 9</div>
Slide 10</div>
</div>
</div>
</div>
</div>
</div>
<!-- Swiper JS -->
../package/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
effect = 0
var swiper = new Swiper('.swiper-container', {
loop: true,
speed: 2500,
slidesPerView: 7,
spaceBetween: 30,
centeredSlides : true,
watchSlidesProgress : true,
on: {
setTranslate: function(){
slides = this.slides
for(i=0; i< slides.length; i++){
slide = slides.eq(i)
progress = slides[i].progress
//slide.html(progress.toFixed(2)); 看清楚progress是怎么变化的
slide.css({'opacity': '','background': ''});slide.transform('');//清除样式
if(effect == 1){
slide.transform('scale('+(1 - Math.abs(progress)/8)+')');
}else if(effect == 2){
slide.css('opacity',(1-Math.abs(progress)/6));
slide.transform('translate3d(0,'+ Math.abs(progress)*20+'px, 0)');
}
else if(effect == 3){
slide.transform('rotate('+ progress*30+'deg)');
}else if(effect == 4){
slide.css('background','rgba('+ (255 - Math.abs(progress)*20) +','+ (127 + progress*32) +',' + Math.abs(progress)*64 + ')');
}
}
},
setTransition: function(transition) {
for (var i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i)
slide.transition(transition);
}
},
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
pe = document.getElementById('progressEffect');
pe.onchange = function(){
effect = this.value
swiper.update();
}
</script>
</body>
</html>
浙公网安备 33010602011771号