swiper实现触摸滑动

骑猪看日落 2022-08-05 02:43 224阅读 0赞

引入需要的文件

文件下载地址[http://www.swiper.com.cn/download/index.html\#file7][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][http_www.swiper.com.cn_usage_index.html]

效果如下：

![20150602161012312][]

[http_www.swiper.com.cn_download_index.html_file7]: http://www.swiper.com.cn/download/index.html#file7
[http_www.swiper.com.cn_usage_index.html]: http://www.swiper.com.cn/usage/index.html
[20150602161012312]: /images/20220805/fc3ad19f98ab456e91e4da1ccc10eafc.png