간단하고 실용적인 js 플러그인 - Swiper

Swiper(Swiper master)는 현재 널리 사용되는 모바일 웹페이지 터치 콘텐츠 슬라이딩 js 플러그인으로, 캐러셀 및 슬라이딩에 사용할 수 있습니다.

• 초기화

  nbsp;html>
      <meta>  <title></title>  <link>  <style>  .swiper-container {  width: 600px;  height: 300px;  } 
            .swiper-slide{  font-size: 50px          }  .swiper-slide:nth-of-type(1){  background-color: cornflowerblue;  }  .swiper-slide:nth-of-type(2){  background-color: coral;  }  .swiper-slide:nth-of-type(3){  background-color: yellowgreen;  }  </style>
    
      <div>  <div>  <div>Slide 1</div>  <div>Slide 2</div>  <div>Slide 3</div>  </div>  <!-- 如果需要分页器 -->  <div></div>  <!-- 如果需要导航按钮 -->  <div></div>  <div></div>  <!-- 如果需要滚动条 -->  <div></div>  </div>  <!--导航等组件可以放在container之外-->  <script></script>  <script>        
            var mySwiper = new Swiper (&#39;.swiper-container&#39;, {
                direction: &#39;vertical&#39;,//                loop: true,//                //                // 如果需要分页器              pagination: &#39;.swiper-pagination&#39;,//                //                // 如果需要前进后退按钮              nextButton: &#39;.swiper-button-next&#39;,
                prevButton: &#39;.swiper-button-prev&#39;,//                //                // 如果需要滚动条              scrollbar: &#39;.swiper-scrollbar&#39;,
            })</script>
    

• 기본 구성

  var mySwiper = new Swiper ('.swiper-container', {
                     // 滑动方向
                    // horizontal水平
                    // vertical垂直
                direction: 'horizontal',
                // 初始化时候slide的索引(从0开始)
                initialSlide: 1,                
                // 手指松开至slide贴合的时间
                speed:3000,                
                // 设置自动播放的事件间隔
                autoplay: 2000,
                // 可显示数量
                slidesPerView:2,                
                // 滑块居中
                centeredSlides:true,
            })

• 터치 설정

    var mySwiper = new Swiper ('.swiper-container', {
                direction: 'horizontal',
  
                // 触摸距离与slide滑动距离的比率 
                touchRatio:0.1,
  
                // 无法滑动
                onlyExternal:true,
  
                // 滑块跟随手指进行移动
                followFinger:false,
  
                // 定义longSwipesMs
                longSwipesMs:1000,
  
                longSwipes:false,
  
                shortSwipes:false,
  
                longSwipesRatio:0.5,
  
                touchAngle:10,
            })
  禁止切换和前进后退  <div> <div> <div>Slide 1</div> <!--<div class="swiper-slide swiper-no-swiping">Slide 2</div>--> <div>Slide 2</div> <div>Slide 3</div> </div> </div> <button>prev</button> <button>next</button> <script></script> <script>        
           var mySwiper = new Swiper (&#39;.swiper-container&#39;, {
               direction: &#39;horizontal&#39;,
               noSwiping:true,
               noSwipingClass : "stop",
               nextButton : ".next",
               prevButton : ".prev",
           })       </script>分页器      <style>  .swiper-container {  width: 600px;  height: 300px;  } 
            .swiper-slide{  font-size: 50px          }  .swiper-slide:nth-of-type(1){  background-color: cornflowerblue;  }  .swiper-slide:nth-of-type(2){  background-color: coral;  }  .swiper-slide:nth-of-type(3){  background-color: yellowgreen;  }  .swiper-pagination-bullet{  width: 20px;  height: 20px;  }  .swiper-pagination-bullet-active{  background-color: yellow;  }  </style>
    
      <div>  <div>  <div>Slide 1</div>  <div>Slide 2</div>  <div>Slide 3</div>  </div>  <div></div>  </div>  <script></script>  <script>        
            var mySwiper = new Swiper (&#39;.swiper-container&#39;, {
                direction: &#39;horizontal&#39;,                
                pagination : ".swiper-pagination",                
                paginationType : "bullets",
                paginationType : "fraction",
                paginationType : "progress",                
                paginationClickable : true,
                paginationHide : true,
                paginationElement : "i",
                paginationBulletRender : function( swiper,index,classname ){                  return "<span class=&#39;"+ classname +"&#39;>"+ (index+1) +""  }
            })</script>
    切换效果  <script>        
            var mySwiper = new Swiper (&#39;.swiper-container&#39;, {
                direction: &#39;horizontal&#39;,
  
                effect : "slide",
                effect : "fade",
                effect : "cube",
                effect : "coverflow",
                effect : "flip",
            })</script>进程  <div>  <div>  <div>Slide 1</div>  <div>Slide 2</div>  <div>Slide 3</div>  </div>  </div>  <button>按钮</button>  <script></script>  <script>        
            var mySwiper = new Swiper (&#39;.swiper-container&#39;, {
                direction: &#39;horizontal&#39;,
  
            })
  
            btn.onclick = function(){
                alert( mySwiper.progress );
                alert( mySwiper.slides[0].progress );
                console.log( mySwiper.slides[0].progress,mySwiper.slides[1].progress,mySwiper.slides[2].progress );
            }
  
            setInterval(function(){
                console.log( mySwiper.slides[0].progress,mySwiper.slides[1].progress,mySwiper.slides[2].progress );
            },20)</script>
    

• 공통 속성 및 콜백

    <div>  <div>  <div>Slide 1</div>  <div>Slide 2</div>  <div>Slide 3</div>  </div>  </div>  <button>按钮</button>  <script></script>  <script>        
            var mySwiper = new Swiper (&#39;.swiper-container&#39;, {
                direction: &#39;horizontal&#39;,
  
                speed : 2000,
  
                onSlideChangeStart : function(){
                    console.log( "开始滑动" );
                },
                onSlideChangeEnd : function(){
                    console.log( "滑动结束" );
                }
            })
  
            console.log( mySwiper.width );
            console.log( mySwiper.height );
  
            btn.onclick = function(){
                console.log( mySwiper.translate );
                console.log( mySwiper.activeIndex );
                console.log( mySwiper.previousIndex );
            }        </script>
    

위 내용은 간단하고 실용적인 js 플러그인 - Swiper의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!