swiper的基本使用

jacklove原創: 2018-06-11 23:42:147252瀏覽

swiper是什麼？

swiper是一款輕量級的輪播圖插件，不僅支援pc端更是為行動端而生，用它可以快速地做出一個輪播圖，或者擴展使其做出複雜的輪播效果。

基本用法

swiper使用需要兩個文件，一個是swiper.css，裡面規定了一些在這個滑動輪播插件中常用的樣式，當然如果你願意的話可以自己定義樣式
另外一個是swiper.js這個是外掛程式的主體部分。
在頁面中引入這兩個檔案之後首先要寫基本的html結構
下面所有的使用方式基於swiper 4.x

  <p class="swiper-container">
    <p class="swiper-wrapper">
      <p class="swiper-slide">Slide 1</p>
      <p class="swiper-slide">Slide 2</p>
      <p class="swiper-slide">Slide 3</p>
      <p class="swiper-slide">Slide 4</p>
      <p class="swiper-slide">Slide 5</p>
      <p class="swiper-slide">Slide 6</p>
      <p class="swiper-slide">Slide 7</p>
      <p class="swiper-slide">Slide 8</p>
      <p class="swiper-slide">Slide 9</p>
      <p class="swiper-slide">Slide 10</p>
    </p>
  </p>

類別名為swiper-container 是滑動輪播插件的包裹器，類似於mask，一個窗口，swiper-wrapper是一個按照一定順序排列的所有輪播圖的集合，在默認情況下是左右排列，當滑鼠或觸控螢幕進行操作的時候，改變的是這個元素的位置，而達到輪播的效果。 swiper-slide則是每個輪播圖元素，在寫好基本html結構之後，需要對這個輪播圖進行初始化

<script>
    var swiper = new Swiper(&#39;.swiper-container&#39;);</script>

這樣就能產生一個預設的輪播圖，可以用滑鼠或者觸控螢幕來進行左右的滑動

新增分頁與導航

大部分的輪播圖都有分頁，導航，可以讓使用者看到目前是在什麼位置，並且讓使用者知道這是一個可以互動的部分，添加分頁的方式也很簡單，只需要在初始化的時候添加選項指定一下分頁的元素就行
html部分,在swiper-container下面添加下一個與上一個按鈕

    <p class="swiper-container">
        <p class="swiper-wrapper">...</p>
          <p class="swiper-button-next"></p>
          <p class="swiper-button-prev"></p>
    </p>

在這裡swiper-button-next和swiper-button-prev都是指定好的按鈕，下一個按鈕會垂直居中並且靠右邊，上一個按鈕會垂直居中靠右邊，當然也能自己指定按鈕。

    var swiper = new Swiper(&#39;.swiper-container&#39;,{
        navigation:{
            nextEl: &#39;.swiper-button-next&#39;,
            prevEl: &#39;.swiper-button-prev&#39;,
        }
    });

在初始化函數中新增按鈕元素。
這樣就能產生一個有導覽按鈕的輪播圖了

swiper的基本使用

#新增分頁的方式和導覽按鈕非常類似
html:

  <p class="swiper-container">
    <p class="swiper-wrapper">
        ...    </p>
    <!-- 分页 -->
    <p class="swiper-pagination"></p>
    <!--导航按钮-->
    <p class="swiper-button-next"></p>
    <p class="swiper-button-prev"></p>
  </p>

在初始化的時候加入分頁元素
js:

    var swiper = new Swiper(&#39;.swiper-container&#39;, {
      pagination: {
        el: &#39;.swiper-pagination&#39;,
      },
      navigation:{
        nextEl: &#39;.swiper-button-next&#39;,
        prevEl: &#39;.swiper-button-prev&#39;,
      }
    });

這樣就能產生有分頁又有導航的輪播圖了
swiper的基本使用

循環與自動輪播：

js：
在初始化的時候加入

   var swiper = new Swiper(&#39;.swiper-container&#39;, {       //分页
       pagination: {
           el: &#39;.swiper-pagination&#39;,
       },       //导航按钮
       navigation:{
           nextEl: &#39;.swiper-button-next&#39;,
           prevEl: &#39;.swiper-button-prev&#39;,
       },       //自动轮播
       autoplay: {
           delay: 2500,//时间 毫秒
           disableOnInteraction: false,//用户操作之后是否停止自动轮播默认true 
       },
   });

其他常用屬性

##分頁用進度條取代

   var swiper = new Swiper(&#39;.swiper-container&#39;, {
        pagination: {
            el: &#39;.swiper-pagination&#39;,            type: &#39;progressbar&#39;,//将分页的类型改为进度条就行
        },
        navigation:{
            nextEl: &#39;.swiper-button-next&#39;,
            prevEl: &#39;.swiper-button-prev&#39;,
        },
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
    });

本文解釋了swiper的基本使用，更多相關內容請關注php中文網。

swiper的基本使用

swiper是什麼？

基本用法

新增分頁與導航

循環與自動輪播：

其他常用屬性

相關文章