swiper怎么用-四川平武建站

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

swiper怎么用

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

從網(wǎng)站建設(shè)到定制行業(yè)解決方案，為提供成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)服務(wù)體系，各種行業(yè)企業(yè)客戶提供網(wǎng)站建設(shè)解決方案，助力業(yè)務(wù)快速發(fā)展。成都創(chuàng)新互聯(lián)公司將不斷加快創(chuàng)新步伐，提供優(yōu)質(zhì)的建站服務(wù)。

swiper是什么？

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

基本用法

swiper使用需要兩個(gè)文件，一個(gè)是swiper.css，里面規(guī)定了一些在這個(gè)滑動(dòng)輪播插件中常用的樣式，當(dāng)然如果你愿意的話可以自己定義樣式
另外一個(gè)是swiper.js這個(gè)是插件的主體部分。
在頁面中引入這兩個(gè)文件之后首先要寫基本的html結(jié)構(gòu)
下面所有的使用方式基于swiper 4.x

  
    
      Slide 1
      Slide 2
      Slide 3
      Slide 4
      Slide 5
      Slide 6
      Slide 7
      Slide 8
      Slide 9
      Slide 10

類名為swiper-container 是滑動(dòng)輪播插件的包裹器，類似于一個(gè)mask，一個(gè)窗口，swiper-wrapper是一個(gè)按照一定順序排列的所有輪播圖的集合，在默認(rèn)情況下是左右排列，當(dāng)鼠標(biāo)或者觸屏進(jìn)行操作的時(shí)候，改變的是這個(gè)元素的位置，而達(dá)到輪播的效果。swiper-slide則是每個(gè)輪播圖元素，在寫好基本html結(jié)構(gòu)之后，需要對(duì)這個(gè)輪播圖進(jìn)行初始化

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

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

大部分的輪播圖都有分頁，導(dǎo)航，可以讓用戶看到目前是在什么位置，并且讓用戶知道這是一個(gè)可以交互的部分，添加分頁的方式也很簡單，只需要在初始化的時(shí)候添加選項(xiàng)指定一下分頁的元素就行
html部分,在swiper-container下面添加下一個(gè)與上一個(gè)按鈕

...

在這里swiper-button-next和swiper-button-prev都是指定好的按鈕，下一個(gè)按鈕會(huì)垂直居中并且靠右邊，上一個(gè)按鈕會(huì)垂直居中靠右邊，當(dāng)然也能自己指定按鈕。

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

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

swiper怎么用

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

...

在初始化的時(shí)候加入分頁元素
js:

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

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

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

js：
在初始化的時(shí)候加入

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

其他常用屬性

分頁用進(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)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前名稱：swiper怎么用
路徑分享：http://www.ef60e0e.cn/article/iphcei.html