zoukankan      html  css  js  c++  java
  • Swiper 滑动

    1.http://www.swiper.com.cn/download/  下载Swiper.JS  Swiper.CSS

    2.引入项目,添加html

      <div class="content">
                <div class="swiper-container" id="swiper-container1">
                    <div class="swiper-wrapper" id="orderState">
                         <div class="swiper-slide" title="1">审核通过</div>
                        <div class="swiper-slide" title="2">审核未通过</div>
                     </div>
                </div>

    </div>


                <div class="swiper-container" id="swiper-container2">
                    <div class="swiper-wrapper">
                  
           <div class="swiper-slide">@*审核通过*@
                            <div id="AuditthroughDt" data-type="1" class="allOrder  yscroll">
                                <div id="ADiv">
                               
                                </div>
                           </div>
                        </div>

          <div class="swiper-slide">@*审核未通过*@
                            <div id="AuditthroughDt" data-type="2" class="allOrder  yscroll">
                                <div id="BDIV">
                           
                                </div>
                           </div>
                        </div>
                             
                    
                     </div>
                </div>

    3.调用

         //左右滑动
                var mySwiper1 = new Swiper('#swiper-container1', {
                    direction: 'horizontal',
                    loop: false,
                    slidesPerView: 1,//显示几个
                    watchSlidesProgress: true,
                    watchSlidesVisibility: true,
                    onTap: function () {

          //到那个选项卡  
                        mySwiper2.slideTo(mySwiper1.clickedIndex)
                    }

                })

  • 相关阅读:
    我是这样在Google paly上赚美刀的
    休闲英语:超经典实用的英文短信缩写
    休闲英语:揭秘7招最有效的拍马屁技巧
    laravel5数据库配置及其注意事项
    帮助函数
    Laravel报错Call to undefined function Illuminate\Encryption\openssl_cipher_iv_length()
    NetBeans 时事通讯(刊号 # 67 Aug 04, 2009)
    JavaEE 6 将包括 JSR330 和 JSR299
    苯事两则
    NetBeans 时事通讯(刊号 # 66 Jul 30, 2009)
  • 原文地址:https://www.cnblogs.com/j2ee-web-01/p/7286105.html
Copyright © 2011-2022 走看看