swiper怎么用

小編給大家分享一下swiper怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

swiper是什么？

swiper是一款輕量級的輪播圖插件，不僅支持pc端更是為移動端而生，用它可以快速地做出一個輪播圖，或者擴(kuò)展使其做出復(fù)雜的輪播效果。

基本用法

swiper使用需要兩個文件，一個是swiper.css，里面規(guī)定了一些在這個滑動輪播插件中常用的樣式，當(dāng)然如果你愿意的話可以自己定義樣式
另外一個是swiper.js這個是插件的主體部分。
在頁面中引入這兩個文件之后首先要寫基本的html結(jié)構(gòu)
下面所有的使用方式基于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是一個按照一定順序排列的所有輪播圖的集合，在默認(rèn)情況下是左右排列，當(dāng)鼠標(biāo)或者觸屏進(jìn)行操作的時候，改變的是這個元素的位置，而達(dá)到輪播的效果。swiper-slide則是每個輪播圖元素，在寫好基本html結(jié)構(gòu)之后，需要對這個輪播圖進(jìn)行初始化

<script>
    var swiper = new Swiper('.swiper-container');</script>

這樣就能生成一個默認(rèn)的輪播圖，可以用鼠標(biāo)或者觸摸屏來進(jìn)行左右的滑動

添加分頁與導(dǎo)航

大部分的輪播圖都有分頁，導(dǎo)航，可以讓用戶看到目前是在什么位置，并且讓用戶知道這是一個可以交互的部分，添加分頁的方式也很簡單，只需要在初始化的時候添加選項指定一下分頁的元素就行
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都是指定好的按鈕，下一個按鈕會垂直居中并且靠右邊，上一個按鈕會垂直居中靠右邊，當(dāng)然也能自己指定按鈕。

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

在初始化函數(shù)中添加按鈕元素。
這樣就能生成一個有導(dǎo)航按鈕的輪播圖了

添加分頁的方式和導(dǎo)航按鈕非常類似
html:

  <p class="swiper-container">
    <p class="swiper-wrapper">
        ...    </p>
    <!-- 分頁 -->
    <p class="swiper-pagination"></p>
    <!--導(dǎo)航按鈕-->
    <p class="swiper-button-next"></p>
    <p class="swiper-button-prev"></p>
  </p>

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

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

這樣就能生成有分頁又有導(dǎo)航的輪播圖了

循環(huán)與自動輪播：

js：
在初始化的時候加入

   var swiper = new Swiper('.swiper-container', {       //分頁
       pagination: {
           el: '.swiper-pagination',
       },       //導(dǎo)航按鈕
       navigation:{
           nextEl: '.swiper-button-next',
           prevEl: '.swiper-button-prev',
       },       //自動輪播
       autoplay: {
           delay: 2500,//時間 毫秒
           disableOnInteraction: false,//用戶操作之后是否停止自動輪播默認(rèn)true 
       },
   });

其他常用屬性

1. 分頁用進(jìn)度條代替

   var swiper = new Swiper('.swiper-container', {
        pagination: {
            el: '.swiper-pagination',            type: 'progressbar',//將分頁的類型改為進(jìn)度條就行
        },
        navigation:{
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
    });

以上是“swiper怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！