Swiper技術(shù)在圖書館網(wǎng)站制作中的應(yīng)用研究

馬寧寧

摘要：互聯(lián)網(wǎng)時代，圖書館網(wǎng)站建設(shè)的重要性日益突出。Swiper技術(shù)因其簡單易用、擴展性強、兼容性高、支持移動端等優(yōu)點，在眾多網(wǎng)頁制作技術(shù)中脫穎而出。該文對Swiper的初始化參數(shù)設(shè)置和部分重要組件進行了詳細介紹，并基于此制作了一個應(yīng)用實例，希望能為圖書館的網(wǎng)站制作提供借鑒和參考。

關(guān)鍵詞：網(wǎng)站制作;Swiper;輪播圖

中圖分類號：G252? ? ? 文獻標識碼：A

文章編號：1009-3044（2021）02-0004-03

1 背景

隨著信息技術(shù)的發(fā)展，越來越多的圖書館開發(fā)了自己的門戶網(wǎng)站，將數(shù)字化的館藏資源和各類圖書館信息放在網(wǎng)站上展示，以更好地服務(wù)讀者。圖書館門戶網(wǎng)站是讀者獲取館藏資源和信息的重要窗口，網(wǎng)站內(nèi)容的展現(xiàn)形式和交互性會極大地影響信息傳遞的效率和用戶體驗的效果，因此，圖書館網(wǎng)站的設(shè)計與制作顯得尤為重要。

在圖書館網(wǎng)站上，如何將館內(nèi)最新通知、推薦館藏、在線展覽等內(nèi)容通過絢麗奪目的效果展示給讀者呢？——我們可以利用Swiper技術(shù)制作的輪播圖來實現(xiàn)。輪播圖是指網(wǎng)頁中一組帶有滾動效果的圖片，能夠輪換播放，并能漸變滑動[1]。輪播圖一般占據(jù)網(wǎng)頁黃金位置，其展示效果好壞將直接影響網(wǎng)站在用戶心中的第一印象，所以我們必須加以重視。在紛繁復(fù)雜的網(wǎng)頁制作和展示技術(shù)中，Swiper因其簡單易用、兼容性好、多終端支持等優(yōu)點被各大網(wǎng)站廣泛使用——今日頭條、網(wǎng)易、新浪、騰訊、優(yōu)酷、華為云、拼多多、順豐、格力、小米以及教育部等近100個國內(nèi)外各個行業(yè)領(lǐng)域的網(wǎng)站均采用了該技術(shù)。本文將對Swiper技術(shù)的使用方法進行詳細介紹和深入探討。

2 Swiper概述

2.1 簡介

Swiper是一個開源而小巧的JS框架，它支持移動終端的觸摸滑動，如果設(shè)備支持的話，它還能夠使用終端硬件加速過渡效果。Swiper主要是面向蘋果操作系統(tǒng)的，但也支持安卓和Windows 8以上的系統(tǒng)。Swiper目前已經(jīng)更新到6.1.1版，由于3.0以后的版本不再考慮對電腦端的兼容問題，所以，如果開發(fā)者想兼容IE7及之前的PC端瀏覽器，就只能選擇Swiper2.x的版本。Swiper完全開源（MIT Licensed），無論在個人網(wǎng)站或商業(yè)網(wǎng)站上使用都無須付費[2]。

2.2 結(jié)構(gòu)和原理

每個Swiper實例都有一個總?cè)萜鳎╟ontainer），里面包含著封裝器（wrapper）、前進后退按鈕控件（navigation）以及分頁器控件（pagination）等組件。其中的封裝器（wrapper）是Swiper的主體部分，其中封裝了全部的展示屏（slide），每個展示屏（slide）中可以放置圖片、文字、超鏈接等需要展示的內(nèi)容，這些展示屏可以排成一行或者多行顯示。具體如圖1所示。

當手指觸摸或鼠標滑動Swiper展示屏（slide）時，Swiper在瀏覽器中的每一幀，通過計算滑動的距離差，對封裝器（wrapper）進行位移（transform）操作，從而產(chǎn)生拖動圖片的效果。在手指或鼠標釋放展示屏（slide）時，就會計算下一個展示屏（slide）的起始位置，同時封裝器（wrapper）設(shè)置位移動畫（transition），從而產(chǎn)生切換圖片的動畫效果[3]。

3 Swiper的使用方法

3.1 Swiper的初始化

為了使Swiper組件正常運行，在使用Swiper之前，我們首先要導(dǎo)入相關(guān)的CSS和JS插件，這些插件我們可以從官網(wǎng)https：//www.swiper.com.cn/download/index.html上找到并下載，然后將下載下來的文件放入本地項目文件對應(yīng)的js文件夾和css文件夾中。代碼如下：

? ? //css文件

? ? //js文件

然后，我們便可以進行初始化了：

var mySwiper = new Swiper（'.swiper-container'， {

autoplay： true，? //輪播圖自動播放，可選項

}）

上面代碼中的swiper-container代表所有展示屏（slide）的容器，是必選項;其他屬性均為可選項，我們可以根據(jù)實際需要選擇不同的屬性參數(shù)。

需要特別注意的是：如果我們需要在一個網(wǎng)頁中制作多個Swiper輪播圖，可以給每個Swiper輪播圖的容器（container）加上自定義的ID名稱或Class類名予以區(qū)分，但是要記得要保留swiper默認的類名swiper-container。

HTML部分的實現(xiàn)代碼如下：

JS部分的代碼則需要對應(yīng)上面的id，如下所示：

var swiper1 = new Swiper（'#swiper1'）;

var swiper2 = new Swiper（'#swiper2'）;

var swiper3 = new Swiper（'#swiper3'）;

3.2 配置選項和組件

Swiper有很多屬性，其中最常用屬性有基礎(chǔ)參數(shù)、分頁器、前進后退按鈕、切換效果、鼠標/鍵盤事件、網(wǎng)格分布、回調(diào)函數(shù)等。具體參數(shù)如表1所示。

Swiper的網(wǎng)格分布組件可以通過一系列參數(shù)的設(shè)置來規(guī)定輪播圖模塊中所有圖片的排列布局方式，既可以設(shè)置輪播圖中圖片顯示的行數(shù)，也可以設(shè)置每行顯示的圖片個數(shù)，如果單屏顯示多個圖片的話，還可以規(guī)定圖片之間有無間隙，以及間隙的大小。分頁器是用來為輪播圖模塊中的展示圖片添加索引的，它的默認樣式是圓點型，當然我們也可以改為分數(shù)式或進度條樣式，甚至可以自定義為自己喜歡的樣子。

在Swiper輪播圖中，用戶既可以通過手指或鼠標拖動圖片來進行圖片切換，還可以在PC端利用鼠標或鍵盤來控制圖片切換。輪播圖中的圖片切換效果也是可以通過相應(yīng)的參數(shù)來控制的，我們既可以選擇默認的位移切換，還可以選擇淡入淡出、立體方塊變換、3D流行進翻轉(zhuǎn)、3D軸翻轉(zhuǎn)等豐富多彩的切換效果。此外，Swiper還有很多詳細深入的參數(shù)配置供用戶使用，通過各個參數(shù)的合理配置與搭配使用，使輪播圖達到用戶期待的效果。

4 Swiper的應(yīng)用實例

那么Swiper組件在網(wǎng)站開發(fā)中如何使用呢？下面，本文將利用該組件制作一個可以自動循環(huán)播放的輪播圖實例，用戶既可以在PC端使用鼠標點擊左右箭頭和導(dǎo)航圓點來控制圖片切換，也可以在移動端用手指左右滑動圖片來實現(xiàn)圖片切換。具體效果圖如圖2所示。

使用Swiper制作圖2中的輪播圖的步驟如下：

步驟1：從Swiper官網(wǎng)下載最新版本的壓縮包swiper-6.1.1.zip，解壓后從中找到swiper-bundle.min.css文件和swiper-bundle.min.js文件，并分別保存到本地項目文件夾中的css文件夾和js文件夾中。

步驟2：在html文件中引入步驟1下載的swiper-bundle.min.css文件和swiper-bundle.min.js文件，前者放在標簽之間，后者放在頁面尾部且在 標簽之前。

<！DOCTYPE html>

<！--導(dǎo)入swiper插件的css樣式壓縮文件-->

...

<！-- 導(dǎo)入swiper插件的js壓縮文件 -->

...

步驟3：用標準的html結(jié)構(gòu)來創(chuàng)建Swiper輪播圖的實例，并添加本地圖片信息。

<！-- 整個輪播圖組件都封裝在swiper-container類里 -->

<！-- 所有輪播圖的圖片都封裝在swiper- wrapper類里 -->

<！-- 分頁器（輪播圖中圖片底部的小圓點） -->

<！--導(dǎo)航按鈕（上一頁和下一頁按鈕）-->

<！--上一頁按鈕） -->

<！--下一頁按鈕-->

<！--滾動條（輪播圖中圖片底部的橫線）-->

<！--

-->

步驟4：在head標簽中添加css樣式，給Swiper輪播圖定義大小。

步驟5：初始化Swiper，下面的代碼要放在body末尾標簽之前，步驟2中導(dǎo)入的js壓縮文件代碼之后。

//初始化Swiper，返回初始化后的Swiper實例

var mySwiper = new Swiper （'.swiper-container'， {

// 水平切換圖片還是垂直切換圖片，vertical為垂直切換，'horizontal'為水平切換

direction： 'horizontal'，

// 輪播圖能否循環(huán)播放，ture為可以，false為不可以

loop： true，

// 輪播圖能否自動播放，ture為可以，false為不可以

autoplay：true，

// 分頁器選項

pagination： {

//分頁器基礎(chǔ)選項

el： '.swiper-pagination'，

//可點擊分頁器切換圖片

clickable ：true，

}，

// 添加前進后退按鈕

navigation： {

// 下一頁按鈕

nextEl： '.swiper-button-next'，

// 上一頁按鈕

prevEl： '.swiper-button-prev'，

}，

//添加滾動條選項

scrollbar： {

//滾動條基礎(chǔ)選項

el： '.swiper-scrollbar'，

//滾動條能否自動隱藏

hide： true，

//用戶能否拖動滾動條

draggable： true，

}，

}）

到目前為止，一個基于Swiper技術(shù)的輪播圖便制作完畢了。通過該實例的制作過程我們發(fā)現(xiàn)，用Swiper制作輪播圖非常簡捷和方便，只需四五個步驟及數(shù)個相關(guān)參數(shù)的配置，即可實現(xiàn)各種網(wǎng)站元素交互方式和網(wǎng)頁內(nèi)容展示效果。此外，Swiper制作的輪播圖還能根據(jù)終端顯示器的屏幕尺寸進行響應(yīng)式調(diào)節(jié)，對 PC、手機等都有良好的支持，功能非常強大。

5 結(jié)束語

本文詳細介紹了Swiper技術(shù)在網(wǎng)站開發(fā)過程中所需要的初始化參數(shù)配置和部分重要組件的含義。該技術(shù)簡單好用，只需編寫少量代碼就能實現(xiàn)各種絢麗的網(wǎng)頁特效，并能支持手機、平板等終端設(shè)備的觸摸功能[4];另外，Swiper免費、開源的特性吸引越來越多的開發(fā)人員加入其中，開發(fā)了大量Swiper基礎(chǔ)演示實例，用戶可以在官網(wǎng)上輕松下載使用。希望此文能為圖書館網(wǎng)站制作者提供借鑒和參考，簡化門戶網(wǎng)站的制作過程，豐富內(nèi)容展示形式，提高用戶體驗效果，增加圖書館門戶網(wǎng)站的影響力。

本文對Swiper的初始化參數(shù)設(shè)置和部分重要組件進行了詳細介紹，并基于此制作了一個應(yīng)用實例，希望能為圖書館的網(wǎng)站制作提供借鑒和參考。

參考文獻：

[1] 龔麗.網(wǎng)頁中輪播圖的實現(xiàn)方法探討[J].電腦知識與技術(shù)，2017，13（31）：273-274，281.

[2] 關(guān)于Swiper[EB/OL].[2020-09-09].https：//www.swiper.com.cn/about/us/index.html.

[3] Swiper 中文網(wǎng)[EB/OL].[2020-09-03].https：//swiper.com.cn/.

[4] 蘭全祥，劉星，陳波.Swiper技術(shù)在網(wǎng)頁設(shè)計中的應(yīng)用淺析[J].攀枝花學(xué)院學(xué)報，2018，35（2）：51-55.

【通聯(lián)編輯：謝媛媛】