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>
<!-- 假设须要导航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
的影响,如下面的: