一、什么是 Swiper ？Swiper 是一個純 JavaScript 打造的滑動特效插件，面向手機、平板電腦等移動終端。它能夠實現觸屏焦點圖、觸屏 Tab 切換、觸屏多圖切換等常用效果。Swiper 開源、免費、穩定、使用簡單、功能強大，是網站開發中的不二選擇。Swiper 應用廣泛，使用頻率僅次于 jQuery，輪播圖類排名第一，是網頁設計師必備技能。眾多耳熟能詳的品牌在使用，如：北京東奧官網，華為，格力，順豐，大疆，網易等等。
簡單了解完 Swiper 強大之處了，今天我們主要的內容是講講如何使用 Swiper 實現網頁開發中常見的縮略圖焦點圖雙向控制。
二、引入 Swiper 插件首先，我們要在網站中引入 swiper 插件，這邊推薦使用 swiper5 或者 swiper7 的版本，具體資源可以在官網下載，這里以 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>
三、創建 Html 結構<!-- 焦點圖 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>
 <!-- 前進后退按鈕 -->
 <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 中設置焦點圖和縮略圖的樣式：/* ==================== 焦點圖和縮略圖公用樣式 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;
}
/* ==================== 焦點圖和縮略圖公用樣式 End ==================== */
/* ==================== 焦點圖樣式 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;
}
/* ==================== 焦點圖樣式 End ==================== */
/* ==================== 縮略圖樣式 Start ==================== */
.thumbsSwiper .swiper-slide {
 height: 100px;
 line-height: 100px;
 cursor: pointer;
}
/* ==================== 縮略圖樣式 End ==================== */
五、在 Javascript 中初始化 Swiperlet gallerySwiper = new Swiper("#gallerySwiper", {
 speed: 800, // 切換速度
 allowTouchMove: false, // 設置焦點圖是否允許觸摸滑動切換
 spaceBetween: 40, // 在slide之間設置距離（單位px）
 navigation: {
   nextEl: "#gallerySwiper .swiper-button-next",
   prevEl: "#gallerySwiper .swiper-button-prev"
},
 thumbs: {
   swiper: {
     el: "#thumbsSwiper",
     spaceBetween: 15,
     slidesPerView: 4, // 設置slider容器能夠同時顯示的slides數量
     observer: true,
     observeParents: true,
     watchSlidesProgress: true,
     watchSlidesVisibility: true
  },
   autoScrollOffset: 1 // 設置自動滾動的邊緣Slide個數
}
});
?
六、最終效果如下： 

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