zoukankan      html  css  js  c++  java
  • Swiper测试

    在页面body中插入

    <div class="swiper-container temp">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                1
            </div>
            <div class="swiper-slide">
                2
            </div>
            <div class="swiper-slide">
                3
            </div>
        </div>
    </div

    页面引入swiper.min.js,swiper.min.css文件以及jquery文件

    <script type="text/javascript">
        var tempSwiper = new Swiper('.swiper-container.temp', {
            //initialSlide: 0,
            //observer:true,
            on: {
                init: function(){//初始化后执行
                  console.log("初始化后执行-init");
                }, 
                touchStart: function(event){//当碰触到slider时执行。可选touchstart事件作为参数
                  console.log("================================================================================");
                  console.log("当碰触到slider时执行-touchStart-"+tempSwiper.activeIndex);
                },
                touchEnd: function(event){//触摸释放时执行,接受 touchend事件作为参数。(释放即执行)
                  console.log("触摸释放时执行-touchEnd-"+tempSwiper.activeIndex);
                },
                slideChangeTransitionStart: function(){//swiper从当前slide开始过渡到另一个slide时执行
                  console.log("从当前slide开始过渡到另一个slide时执行-slideChangeTransitionStart-"+tempSwiper.activeIndex);
                },
                slideChangeTransitionEnd: function(){//swiper从一个slide过渡到另一个slide结束时执行
                  console.log("从一个slide过渡到另一个slide结束时执行-slideChangeTransitionEnd-"+tempSwiper.activeIndex);
                },
                transitionStart: function(){//过渡开始时触发
                  console.log("过渡开始时触发-transitionStart-"+tempSwiper.activeIndex);
                },
                transitionEnd: function(swiper){//过渡结束时触发
                  console.log("过渡结束时触发-transitionEnd-"+tempSwiper.activeIndex);
                },
                reachBeginning: function(){//Swiper切换到初始化位置时执行
                  console.log("Swiper切换到初始化位置时执行-reachBeginning-"+tempSwiper.activeIndex);
                },
                reachEnd: function(){//当Swiper切换到最后一个Slide时执行
                  console.log("当Swiper切换到最后一个Slide时执行-reachEnd-"+tempSwiper.activeIndex);
                },
                slidePrevTransitionStart: function () {//滑块释放时如果触发slider向后(左、上)切换则执行
                    console.log("slider向后(左、上)切换则执行-slidePrevTransitionStart-"+tempSwiper.activeIndex);
                },
                slidePrevTransitionEnd: function(){//slider向后(左、上)切换结束时执行
                  console.log("slider向后(左、上)切换结束时执行-slidePrevTransitionEnd-"+tempSwiper.activeIndex);
                },
                slideNextTransitionStart: function () {//滑块释放时如果触发slider向前(右、下)切换则执行
                    console.log("slider向前(右、下)切换则执行-slideNextTransitionStart-"+tempSwiper.activeIndex);
                },
                slideNextTransitionEnd: function(){//slider向前(右、下)切换结束时执行
                   console.log("slider向前(右、下)切换结束时执行-slideNextTransitionEnd-"+tempSwiper.activeIndex);
                },
                fromEdge: function(){//当Swiper是从第一个或最后一个Slide切换时执行
                  console.log("当Swiper是从第一个或最后一个Slide切换时执行-fromEdge-"+tempSwiper.activeIndex);
                },
                slideChange: function(){//当当前Slide切换时执行(activeIndex发生改变)
                  console.log("当当前Slide切换时执行(activeIndex发生改变)-slideChange-"+tempSwiper.activeIndex);
                },
            },
        });
    </script>
    


    测试结果:

  • 相关阅读:
    grep取缩写|awk两个文件取交集
    p{space}|p{Hex}|p{Digit}|转译符|1|g{-1}|[^ab]|/([^dD]+)/
    线性回归的简单实现mxnet
    线性回归从0实现——mxnet
    决策树(DT)
    C++基本语法(三)存储类及运算符
    C++基本语法(二)数据类型及变量类型、常量
    C++基本语法(一)
    np.zeros((a,b,c))
    python之range()
  • 原文地址:https://www.cnblogs.com/zhyue93/p/swiper_1.html
Copyright © 2011-2022 走看看