swiper插件

swiper是一款普遍使用的插件，写轮播用的比较多。今天写H5页面准备全局用这个插件，移动端滑页。

首先引入两个文件

< link rel= "stylesheet" href= "swiper.min.css" >

< script src= "swiper.min.js" > < / script >

直接贴demo模板，调用添加了一些属性

< body >

<!-- Swiper -->

< 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 class= "swiper-slide" >Slide 4 </ div >

< div class= "swiper-slide" >Slide 5 </ div >

< div class= "swiper-slide" >Slide 6 </ div >

</ div >

<!-- Add Pagination -->

< div class= "swiper-pagination" ></ div >

<!-- Add Arrows -->

<!-- <div class="swiper-button-next"></div>

<div class="swiper-button-prev"></div> -->

</ div >

<!-- Swiper JS -->

< script src= "../dist/js/swiper.min.js" > < / script >

<!-- Initialize Swiper -->

< script >

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

     direction : 'vertical', //方向 默认为横向，改成纵向

pagination: {

el: '.swiper-pagination',

type: 'fraction',

},

navigation: {

nextEl: '.swiper-button-next',

prevEl: '.swiper-button-prev',

},

scrollbar: {

el: '.swiper-scrollbar', //左侧显示滑动条

},

lazy: {

loadPrevNext: true, //设置为true允许将延迟加载应用到下一个的slide的图片

},

autoHeight: true //超出高度自动延长

});

< / script >

</ body >

关于autoHeight补充一些，因为有个slide中内容图片太长，需要在slide内再添加一个滑动阅读功能，

参考小乔FEer的博客 有关于swiper内容超出添加横向/纵向滚动。

第一步 要给swiper-slide添加overflow属性

.swiper-slide {

overflow: auto;

-webkit-overflow-scrolling: touch;

}

然后在js中添加

1. 纵向超出部分滚动 

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

direction: 'vertical',

autoHeight: true

});

var startScroll, touchStart, touchCurrent;

swiper. slides. on( 'touchstart', function ( e) {

startScroll = this. scrollTop;

touchStart = e. targetTouches[ 0]. pageY;

}, true);

swiper. slides. on( 'touchmove', function ( e) {

touchCurrent = e. targetTouches[ 0]. pageY;

var touchesDiff = touchCurrent - touchStart;

var slide = this;

var onlyScrolling =

( slide. scrollHeight > slide. offsetHeight ) && //allow only when slide is scrollable

(

( touchesDiff < 0 && startScroll === 0 ) || //start from top edge to scroll bottom

( touchesDiff > 0 && startScroll === ( slide. scrollHeight - slide. offsetHeight ) ) || //start from bottom edge to scroll top

( startScroll > 0 && startScroll < ( slide. scrollHeight - slide. offsetHeight ) ) //start from the middle

);

if ( onlyScrolling) {

e. stopPropagation();

}

}, true);

2.横向超出部分滚动

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

slidesPerView: 'auto'

});

var startScroll, touchStart, touchCurrent;

swiper. slides. on( 'touchstart', function ( e) {

startScroll = this. scrollLeft;

touchStart = e. targetTouches[ 0]. pageX;

}, true);

swiper. slides. on( 'touchmove', function ( e) {

touchCurrent = e. targetTouches[ 0]. pageX;

var touchesDiff = touchCurrent - touchStart;

var slide = this;

var onlyScrolling =

( slide. scrollWidth > slide. offsetWidth ) && //allow only when slide is scrollable

(

( touchesDiff < 0 && startScroll === 0 ) || //start from left edge to scroll right

( touchesDiff > 0 && startScroll === ( slide. scrollWidth - slide. offsetWidth ) ) || //start from right edge to scroll left

( startScroll > 0 && startScroll < ( slide. scrollWidth - slide. offsetWidth ) ) //start from the middle

);

if ( onlyScrolling) {

e. stopPropagation();

}

}, true);