引入需要的文件
<link href="css/swiper.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<script type="text/javascript" src="js/swiper.min.js"></script>
文件下载地址http://www.swiper.com.cn/download/index.html#file7
使用
<div
class="swiper-container">
<div
class="swiper-wrapper">
<div
class="swiper-slide">Slide 1</div>
<div
class="swiper-slide">Slide 2</div>
<div
class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div
class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div
class="swiper-button-prev"></div>
<div
class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div
class="swiper-scrollbar"></div>
</div>
<script>
var swiper = new Swiper(‘.swiper-container‘, {
pagination: ‘.swiper-pagination‘,
paginationClickable: true,
// direction: ‘vertical‘, 设置成vertical可以控制屏幕上下滑动，默认的是左右滑动
// speed:1000,
});
</script>
如果页面中使用的有css3动画，要在每次翻页时加载动画，可以将动画写成这种样式
@keyframes slideInLeft {
0% {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
visibility: visible;
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
这儿加上.swiper-slide-active div
.swiper-slide-active div.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
}
更多使用方法查看swiper的官方网站http://www.swiper.com.cn/usage/index.html
效果如下：
