Swiper插件的使用==>詳細解析

swiper的使用

Swiper是純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端.

1 加載插件 需要先引入 swiper.min.css 與 swiper.min.css

下載地址: https://www.swiper.com.cn/

2 插件需要特定的HTMl結構

3 引入HTML內容

<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之外

4 可以定義大小,但基本不需要 移動端基本都是使用一個容器包裹

5 HTML內容添加完成之後需要 初始化 Swiper 調用js 引入的話 需要注意 swiper.js 需要在引入自定義的js前面 .不然會報錯

<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    autoplay: true,//可選選項，自動滑動等同下方的設置
    /*autoplay: {
    delay: 3000, //3秒切換一次  
    disableOnInteraction: true / false, //用戶滑動輪播圖之後，是否禁止自動輪播圖 默認是 true 禁止
    },*/

    initialSlide :2,//可設置初始化顯示的是哪張圖片
    loop: true,  //設置是否無縫循環,如果設置爲false 只會循環一次
    effect : 'fade',//設置切換的格式 slide的切換效果，默認爲"slide"（位移切換），可設置爲'slide'（普通切換、默認）,"fade"（淡入）"cube"（方塊）"coverflow"（3d流）"flip"（3d翻轉）。

    // 如果需要分頁器設置位置可以使用position 進行重置 
    pagination: {
      el: '.swiper-pagination',
      bulletElement : 'span',//索引器的設定分頁器指示器（小點）的HTML標籤。
      type: 'bullets',//設置索引器的形狀 
        //‘bullets’  圓點（默認）  ‘fraction’  分式 
    },

    // 如果需要前進後退按鈕
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    // 如果需要滾動條
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
  </script>
</body>