Swiper-輪播圖。

時間 2019-11-21

標籤 swiper 简体版

原文原文鏈接

Swiper(Swiper master)是目前應用較普遍的移動端網頁觸摸內容滑動js插件,能夠用來作輪播和滑動.css

初始化html

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title></title>
      <link rel="stylesheet" type="text/css" href="swiper.css"/>
      <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"></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,
          })

觸摸設置app

  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"></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"></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='"+ classname +"'>"+ (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"></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>

經常使用屬性和回調ide

<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"></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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。