• 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 上

  • 相关阅读:
    2.4 使用vue-cli创建项目/项目打包/发布
    2.3 vue-cli脚手架工具/nodejs
    2.2 vue的devtools、eslint检测问题
    2. es6扩展运算符
    文件json
    函数
    函数不固定参数
    监控日志,加入黑名单
    非空即真
    随机生成手机号,存入文件
  • 原文地址:https://www.cnblogs.com/wesky/p/4662069.html
Copyright © 2020-2023  润新知