>  기사  >  웹 프론트엔드  >  간단하고 실용적인 js 플러그인 - Swiper

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

零下一度
零下一度원래의
2017-06-27 11:02:342673검색

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

  • 초기화

    <!DOCTYPE html><html>
      <head>  <meta charset="UTF-8">  <title></title>  <link rel="stylesheet" type="text/css" href="swiper.css?1.1.11"/>  <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>
      </head>
      <body>  <div class="swiper-container">  <div class="swiper-wrapper">  <div class="swiper-slide">Slide 1</div>  <div class="swiper-slide">Slide 2</div>  <div class="swiper-slide">Slide 3</div>  </div>  <!-- 如果需要分页器 -->  <div class="swiper-pagination"></div>  <!-- 如果需要导航按钮 -->  <div class="swiper-button-prev"></div>  <div class="swiper-button-next"></div>  <!-- 如果需要滚动条 -->  <div class="swiper-scrollbar"></div>  </div>  <!--导航等组件可以放在container之外-->  <script src="swiper.js?1.1.11"></script>  <script>        
              var mySwiper = new Swiper ('.swiper-container', {
                  direction: 'vertical',//                loop: true,//                //                // 如果需要分页器              pagination: '.swiper-pagination',//                //                // 如果需要前进后退按钮              nextButton: '.swiper-button-next',
                  prevButton: '.swiper-button-prev',//                //                // 如果需要滚动条              scrollbar: '.swiper-scrollbar',
              })</script>
      </body></html>

  • 기본 구성

    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,
              })
    禁止切换和前进后退 <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide stop">Slide 1</div> <!--<div class="swiper-slide swiper-no-swiping">Slide 2</div>--> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> </div> <button class="prev">prev</button> <button class="next">next</button> <script src="swiper.js?1.1.11"></script> <script>        
             var mySwiper = new Swiper ('.swiper-container', {
                 direction: 'horizontal',
                 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>
      </head>
      <body>  <div class="swiper-container">  <div class="swiper-wrapper">  <div class="swiper-slide">Slide 1</div>  <div class="swiper-slide">Slide 2</div>  <div class="swiper-slide">Slide 3</div>  </div>  <div class="swiper-pagination"></div>  </div>  <script src="swiper.js?1.1.11"></script>  <script>        
              var mySwiper = new Swiper ('.swiper-container', {
                  direction: 'horizontal',                
                  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) +"</span>"  }
              })</script>
      </body>切换效果  <script>        
              var mySwiper = new Swiper ('.swiper-container', {
                  direction: 'horizontal',
    
                  effect : "slide",
                  effect : "fade",
                  effect : "cube",
                  effect : "coverflow",
                  effect : "flip",
              })</script>进程<body>  <div class="swiper-container">  <div class="swiper-wrapper">  <div class="swiper-slide">Slide 1</div>  <div class="swiper-slide">Slide 2</div>  <div class="swiper-slide">Slide 3</div>  </div>  </div>  <button id="btn">按钮</button>  <script src="swiper.js?1.1.11"></script>  <script>        
              var mySwiper = new Swiper ('.swiper-container', {
                  direction: 'horizontal',
    
              })
    
              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>
      </body>

  • 공통 속성 및 콜백

    <body>  <div class="swiper-container">  <div class="swiper-wrapper">  <div class="swiper-slide">Slide 1</div>  <div class="swiper-slide">Slide 2</div>  <div class="swiper-slide">Slide 3</div>  </div>  </div>  <button id="btn">按钮</button>  <script src="swiper.js?1.1.11"></script>  <script>        
              var mySwiper = new Swiper ('.swiper-container', {
                  direction: 'horizontal',
    
                  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>
      </body>

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.