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

使用

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

<!– 假设须要导航button –>

<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

的影响，如下面的：