swiper实现触摸滑动

标签：动画   swiper   animation   滑动   

引入需要的文件       

        <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

效果如下：

swiper实现触摸滑动

标签：动画   swiper   animation   滑动   

原文地址：http://blog.csdn.net/u012011360/article/details/46331105