シンプルで実用的なjsプラグイン - Swiper-H5 チュートリアル-php.cn

シンプルで実用的なjsプラグイン - Swiper

零下一度

リリース： 2017-06-27 11:02:34

オリジナル

2663 人が閲覧しました

Swiper (Swiper master) は、現在広く使用されているモバイル Web ページのタッチコンテンツのスライディング 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,
          })

ログイン後にコピー

以上がシンプルで実用的なjsプラグイン - Swiperの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。