一、Swiper简介
Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架，使用硬件加速过渡（如果该设备支持的话）。主要使用于移动端的网站、移动web apps，native apps和hybrid apps。主要是为IOS而设计的，同时，在Android、WP8系统也有着良好的用户体验，Swiper从3.0开始不再全面支持PC端。因此，如需在PC上兼容更多的浏览器，可以选择Swiper2.x（甚至支持IE7）。
Swiper 完全免费并开源（MIT Licensed），无论你使用在个人网站或商业网站，都无需付费。
官网：https://www.swiper.com.cn/
二、实例
1、效果图
1.1、缩放型
1.2、3D界面
1.3、Y轴位移
1.4、旋转
1.5、立方体效果
1.6、3d翻转
2、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper Demo</title>
<!--<link rel="stylesheet" href="css/swiper.min.css">-->
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<style>
.myswiper {
width: 1200px;
margin: auto;
text-align: center;
}
img{
width:200px;
height:260px;
}
</style>
</head>
<body>
<div class="myswiper">
<!--缩放型-->
<div class="swiper-container demo1">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img/imgdemo.png">
</div>
<div class="swiper-slide">
<img src="img/imgdemo.png">
</div>
<div class="swiper-slide">
<img src="img/imgdemo.png">
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
</div>
<!--3D界面-->
<div class="swiper-container demo2">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img/imgdemo.png">
</div>
<div class="swiper-slide">
<img src="img/imgdemo.png">
</div>
<div class="swiper-slide">
<img src="img/imgdemo.png">
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
</div>
<!--Y轴位移-->
<div class="swiper-container demo3">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img/imgdemo.png">
</div>
<div class="swiper-slide">
<img src="img/imgdemo.png">
</div>
<div class="swiper-slide">
<img src="img/imgdemo.png">
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
</div>
<!--旋转-->
<div class="swiper-container demo4">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img/imgdemo.png">
</div>
<div class="swiper-slide">
<img src="img/imgdemo.png">
</div>
<div class="swiper-slide">
<img src="img/imgdemo.png">
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
</div>
<!--立方体效果-->
<div class="swiper-container demo5">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img/imgdemo.png">
</div>
<div class="swiper-slide">
<img src="img/imgdemo.png">
</div>
<div class="swiper-slide">
<img src="img/imgdemo.png">
</div>
</div>
</div>
<!--3d翻转-->
<div class="swiper-container demo6">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img/imgdemo.png">
</div>
<div class="swiper-slide">
<img src="img/imgdemo.png">
</div>
<div class="swiper-slide">
<img src="img/imgdemo.png">
</div>
</div>
</div>
</div>
</body>
<!--<script src="js/swiper.min.js"></script>-->
<script src="https://unpkg.com/swiper/js/swiper.min.js"> </script>
<script>
// 缩放型
var swiper = new Swiper('.demo1', {
loop: true,
speed: 2500,
slidesPerView: 5,
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.css({'opacity': '', 'background': ''});
slide.transform('');//清除样式
slide.transform('scale(' + (1 - Math.abs(progress) / 8) + ')');
}
},
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,
}
});
// 3D界面
var swiper = new Swiper('.demo2', {
loop: true,
mousewheel: true, // 鼠标滚动
effect: 'coverflow',
slidesPerView: 3,
centeredSlides: true,
coverflowEffect: {
rotate: 30,
stretch: 10,
depth: 60,
modifier: 2,
slideShadows: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 显示分页器
pagination: {
el: '.swiper-pagination',
clickable: true,
}
});
// Y轴位移
var swiper = new Swiper('.demo3', {
loop: true,
speed: 2500,
slidesPerView: 5,
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.css({'opacity': '', 'background': ''});
slide.transform('');
slide.css('opacity',(1-Math.abs(progress)/6));
slide.transform('translate3d(0,'+ Math.abs(progress)*20+'px, 0)');
}
},
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,
}
});
// 旋转
var swiper = new Swiper('.demo4', {
loop: true,
speed: 2500,
slidesPerView: 5,
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.css({'opacity': '', 'background': ''});
slide.transform('');
slide.transform('rotate('+ progress*30+'deg)');
}
},
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,
}
});
// 立方体效果
var swiper = new Swiper('.demo5', {
loop: true,
mousewheel: true, // 鼠标滚动
effect : 'cube',
cubeEffect: {
slideShadows: true,
shadow: true,
shadowOffset: 100,
shadowScale: 0.6
}
});
// 3d翻转
var swiper = new Swiper('.demo6', {
loop: true,
mousewheel: true, // 鼠标滚动
effect : 'flip',
flipEffect: {
slideShadows : true,
limitRotation : true,
}
});
</script>
</html>官网API地址：https://www.swiper.com.cn/api/index.html
