swiper 技巧
全屏广告高度 ,加上属性。
html, body { position: relative; height: 100%; }
停止自行播放
mySwiper.stopAutoplay();
锁住状态,不让滚动
mySwiper.lockSwipes();
锁住往右滚动
mySwiper.lockSwipeToNext();
锁定往左滚动
mySwiper.lockSwipeToPrev();
恢复一般状态
mySwiper.unlockSwipes();
<script language="javascript"> var mySwiper = new Swiper('.swiper-container',{ autoplay : 1000, }) $('#btn1').click(function(){ $("#showhtml").html('锁住状态'); mySwiper.lockSwipes(); }) $('#btn2').click(function(){ $("#showhtml").html('一般状态'); mySwiper.unlockSwipes(); }) </script>
禁止某个li不滚动
var mySwiper = new Swiper('.swiper-container',{
noSwiping : true,
});
<div class="swiper-slide swiper-no-swiping">
用法: 一般有多个滚动效果放在同一个页面;触摸滚动的时候可能会出现“乱滚”,这个时候就需要一个时间把绑定在某一个区域 如:滚动ban时间,不会带动整个屏幕滚动。
var slide_b = new Swiper('#swiper-container2',{
autoplay : 5000,
pagination : '.slide-b-pagination',
noSwiping : false,
});
跳转到指定屏幕
// 跳转到第二屏 $('.li-a li .li2 h4').click(function(){ mySwiper.slideTo(1, 1000, false); })
<div class="slide-b " id="swiper-container2"> <div class="swiper-wrapper swiper-no-swiping" > <div class="swiper-slide"><a href="#"><img src="../Public/images/1.jpg" /></a></div> <div class="swiper-slide"><a href="#"><img src="../Public/images/2.jpg" /></a></div> <div class="swiper-slide"><a href="#"><img src="../Public/images/3.jpg" /></a></div> </div> <div class="slide-b-pagination "></div> </div>
注:这里的swiper-no-swiping 放在 第二级, 正常的一概是放在 第三级swiper-slide 上