一、什么是 Swiper ？Swiper 是一個(gè)純 JavaScript 打造的滑動(dòng)特效插件，面向手機(jī)、平板電腦等移動(dòng)終端。它能夠?qū)崿F(xiàn)觸屏焦點(diǎn)圖、觸屏 Tab 切換、觸屏多圖切換等常用效果。Swiper 開(kāi)源、免費(fèi)、穩(wěn)定、使用簡(jiǎn)單、功能強(qiáng)大，是網(wǎng)站開(kāi)發(fā)中的不二選擇。Swiper 應(yīng)用廣泛，使用頻率僅次于 jQuery，輪播圖類排名第一，是網(wǎng)頁(yè)設(shè)計(jì)師必備技能。眾多耳熟能詳?shù)钠放圃谑褂?，如：北京東奧官網(wǎng)，華為，格力，順豐，大疆，網(wǎng)易等等。
簡(jiǎn)單了解完 Swiper 強(qiáng)大之處了，今天我們主要的內(nèi)容是講講如何使用 Swiper 實(shí)現(xiàn)網(wǎng)頁(yè)開(kāi)發(fā)中常見(jiàn)的縮略圖焦點(diǎn)圖雙向控制。
二、引入 Swiper 插件首先，我們要在網(wǎng)站中引入 swiper 插件，這邊推薦使用 swiper5 或者 swiper7 的版本，具體資源可以在官網(wǎng)下載，這里以 swiper5 為例。分別引入 css 文件和 javascript 文件如下：
<!-- swiper插件CSS -->
<link rel="stylesheet" href="./css/swiper@5.4.5.min.css">
<!-- swiper插件JS -->
<script src="./js/swiper@5.4.5.min.js"></script>
三、創(chuàng)建 Html 結(jié)構(gòu)<!-- 焦點(diǎn)圖 Swiper -->
<div class="swiper-container gallerySwiper" id="gallerySwiper">
 <div class="swiper-wrapper">
   <div class="swiper-slide">slider1</div>
   <div class="swiper-slide">slider2</div>
   <div class="swiper-slide">slider3</div>
   <div class="swiper-slide">slider4</div>
   <div class="swiper-slide">slider5</div>
 </div>
 <!-- 前進(jìn)后退按鈕 -->
 <div class="swiper-button-prev"></div>
 <div class="swiper-button-next"></div>
</div>
<!-- 縮略圖 Swiper -->
<div class="swiper-container thumbsSwiper" id="thumbsSwiper">
 <div class="swiper-wrapper">
   <div class="swiper-slide">slider1</div>
   <div class="swiper-slide">slider2</div>
   <div class="swiper-slide">slider3</div>
   <div class="swiper-slide">slider4</div>
   <div class="swiper-slide">slider5</div>
 </div>
</div>
四、在 Css 中設(shè)置焦點(diǎn)圖和縮略圖的樣式：/* ==================== 焦點(diǎn)圖和縮略圖公用樣式 Start ==================== */
.gallerySwiper .swiper-slide,
.thumbsSwiper .swiper-slide {
 background-color: #4390ee;
 font-size: 20px;
 text-align: center;
 color: #fff;
 font-weight:200;
}
.gallerySwiper .swiper-slide:nth-child(2n),
.thumbsSwiper .swiper-slide:nth-child(2n) {
 background-color: #ca4040;
}
.gallerySwiper .swiper-slide:nth-child(3n),
.thumbsSwiper .swiper-slide:nth-child(3n) {
 background-color: #ff8604;
}
.gallerySwiper .swiper-slide:nth-child(4n),
.thumbsSwiper .swiper-slide:nth-child(4n) {
 background-color: #4390ee;
}
.gallerySwiper .swiper-slide:nth-child(5n),
.thumbsSwiper .swiper-slide:nth-child(5n) {
 background-color: #22ab39;
}
/* ==================== 焦點(diǎn)圖和縮略圖公用樣式 End ==================== */
/* ==================== 焦點(diǎn)圖樣式 Start ==================== */
.gallerySwiper{
 margin-bottom: 15px;
}
.gallerySwiper .swiper-slide {
 height: 200px;
 line-height: 200px;
}
.gallerySwiper .swiper-button-prev:after,
.gallerySwiper .swiper-button-next:after{
 color: #fff;
 font-size: 20px;
}
/* ==================== 焦點(diǎn)圖樣式 End ==================== */
/* ==================== 縮略圖樣式 Start ==================== */
.thumbsSwiper .swiper-slide {
 height: 100px;
 line-height: 100px;
 cursor: pointer;
}
/* ==================== 縮略圖樣式 End ==================== */
五、在 Javascript 中初始化 Swiperlet gallerySwiper = new Swiper("#gallerySwiper", {
 speed: 800, // 切換速度
 allowTouchMove: false, // 設(shè)置焦點(diǎn)圖是否允許觸摸滑動(dòng)切換
 spaceBetween: 40, // 在slide之間設(shè)置距離（單位px）
 navigation: {
   nextEl: "#gallerySwiper .swiper-button-next",
   prevEl: "#gallerySwiper .swiper-button-prev"
},
 thumbs: {
   swiper: {
     el: "#thumbsSwiper",
     spaceBetween: 15,
     slidesPerView: 4, // 設(shè)置slider容器能夠同時(shí)顯示的slides數(shù)量
     observer: true,
     observeParents: true,
     watchSlidesProgress: true,
     watchSlidesVisibility: true
  },
   autoScrollOffset: 1 // 設(shè)置自動(dòng)滾動(dòng)的邊緣Slide個(gè)數(shù)
}
});
?
六、最終效果如下： 

七、關(guān)鍵代碼：其實(shí)我們使用 swiper 實(shí)現(xiàn)焦點(diǎn)圖，縮略圖雙向切換很簡(jiǎn)單，主要是運(yùn)用了 swiper API 中的thumbs組件，它專門用于制作帶縮略圖的swiper，比使用controller組件更為簡(jiǎn)便，且在loop狀態(tài)下更友好。
值得一提的是，autoScrollOffset屬性，這個(gè)參數(shù)不是實(shí)現(xiàn)焦點(diǎn)圖縮略圖功能的必要屬性。 它可以設(shè)置自動(dòng)滾動(dòng)的邊緣Slide個(gè)數(shù)。
當(dāng)縮略圖的Slide個(gè)數(shù)超過(guò)最大顯示的數(shù)量時(shí)，縮略圖會(huì)自動(dòng)滾動(dòng)來(lái)對(duì)應(yīng)主圖的Slide。默認(rèn)縮略圖與主圖同步顯示，有時(shí)你想縮略圖要比主Swiper提前一些顯示，這時(shí)可以設(shè)置這個(gè)參數(shù)。
比如縮略圖顯示4個(gè)Slide，當(dāng)主圖滑動(dòng)至第五張時(shí)，縮略圖才會(huì)滾動(dòng)，設(shè)置此參數(shù)為1后，主圖滑動(dòng)至第四張時(shí)縮略圖就提前滾動(dòng)了。
具體效果可以在編輯器上自行測(cè)試下，按具體需求使用呢。