swiper实现触摸滑动-蒲公英云

swiper实现触摸滑动

引入需要的文件

    <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>

如果页面中使用的有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

效果如下：

20150602161012312