swiper 技巧

时间:2021-07-09 16:29:34

全屏广告高度 ,加上属性。

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 : ,
})
$('#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(, , 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 上