zoukankan      html  css  js  c++  java
  • 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 上

  • 相关阅读:
    Vue自定义指令
    Vue实例生命周期
    Vue学习目录
    Vue表单控件绑定
    Vue事件处理
    Vue数组更新及过滤排序
    Vue模板逻辑
    Vue模板内容
    Vue实例对象的数据选项
    Vue组件基础用法
  • 原文地址:https://www.cnblogs.com/wesky/p/4662069.html
Copyright © 2011-2022 走看看