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)
                }

            })