swiper 上滑触发_swiper实现触摸滑动

引入文件的必要性

使用

class="swiper-container">

class="swiper-wrapper">

class="swiper-slide">Slide 1

class="swiper-slide">Slide 2

class="swiper-slide">Slide 3

class="swiper-pagination">

class="swiper-button-prev">

class="swiper-button-next">

class="swiper-scrollbar">

var swiper = new Swiper('.swiper-container', {

pagination: '.swiper-pagination',

paginationClickable: true,

//        direction: 'vertical',  设置成vertical能够控制屏幕上下滑动，默认的是左右滑动

//        speed:1000,

});

假设页面中使用的有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;

}

的影响，如下面的：