Swiper.js——用一張輪播圖，打造一個秀美幻境

輪播圖是很多網站都必不可少的功能之一，可以有效地提升網站的視覺效果和交互性，而Swiper.js就是一個非常優秀的輪播圖插件。它提供了豐富的輪播圖效果、選項、API以及事件，為我們開發和維護輪播圖提供了極大的便利。下面我們將從多個方面對Swiper.js做詳細的闡述。

一、Swiper.js 清空

當我們需要對Swiper實例進行清空時，我們可以使用 destroy() 方法。該方法會移除Swiper的DOM元素，解綁所有事件和刪除API中所有屬性。

var mySwiper = new Swiper('.swiper-container', {
  // 選項
});
mySwiper.destroy(); // 在清空之前先銷毀Swiper實例
document.querySelector('.swiper-container').innerHTML = ''; // 清空DOM元素

二、Swiper-Item

在Swiper的輪播圖中，每個輪播項都是一個swiper-item元素。我們可以通過Swiper提供的配置項來自定義輪播項的樣式，如寬度、高度、顏色等等。同時，我們也可以通過給輪播項添加自定義的類名來實現對每個輪播項進行不同的樣式控制。

var mySwiper = new Swiper('.swiper-container', {
  slidesPerView: 3, // 一次輪播3個項
  spaceBetween: 30, // 項之間的間隔
  centeredSlides: true, // 當前項居中
  loop: true, // 環形循環
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

三、Swiper.js環形循環

Swiper提供了 loop: true 配置項，可以讓輪播圖形成環形循環，圖片可以一直向左或者向右循環輪播，視覺效果比較不錯。

var mySwiper = new Swiper('.swiper-container', {
  loop: true, // 環形循環
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

四、Swiper.js 3D畫廊動效

Swiper提供了很多不同的輪播動畫效果，其中3D畫廊效果是比較炫酷的一種效果。我們可以通過給Swiper添加自定義的類名來啟用這種效果，具體配置可參考Swiper的API。

var mySwiper = new Swiper('.swiper-container', {
  effect: 'coverflow', // 3D畫廊效果
  grabCursor: true, // 開啟抓手滑鼠樣式
  centeredSlides: true, // 當前項居中
  slidesPerView: 'auto', // 自由模式
  coverflowEffect: {
    rotate: 30, // 旋轉角度
    stretch: 10, // 拉伸
    depth: 60, // 每個item之間的距離
    modifier: 2, // 3D樣式的密集度
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

五、Swipe

Swiper提供了非常良好的觸摸滑動體驗，適用於移動端和PC端。我們可以使用手指滑動屏幕的方式來輪播圖片，同時也支持PC滑鼠拖動實現輪播。

var mySwiper = new Swiper('.swiper-container', {
  direction: 'vertical', // 垂直方向滑動
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  mousewheel: true, // PC端支持滾輪控制輪播
});

六、Swiper.js 添加自定義類

我們可以通過Swiper提供的回調函數來實現輪播項的自定義樣式控制。例如，在 onSlideChangeStart 回調函數中，我們可以獲取到當前輪播項的索引，並添加自定義的類名來實現對當前輪播項的樣式控制。

var mySwiper = new Swiper('.swiper-container', {
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  on: {
    slideChangeStart: function () {
      var index = this.activeIndex;
      var prevIndex = this.previousIndex;
      // 刪除前一個輪播項的自定義類
      this.slides.eq(prevIndex).removeClass('active');
      // 給當前輪播項添加自定義類
      this.slides.eq(index).addClass('active');
    },
  },
});

七、Swiper.js iOS會自動刷新頁面

在iOS系統中，當我們在Swiper容器中使用了手勢事件（例如游標和滑動），容器所在的頁面可能會在手勢結束後自動觸發刷新。為了避免這種情況，我們需要禁用默認的滾動行為，具體實現方法如下：

var container = document.querySelector('.swiper-container');
container.addEventListener('touchmove', function (e) {
  e.preventDefault();
}, false);

var mySwiper = new Swiper('.swiper-container', {
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

Swiper.js作為一款輕量級的前端輪播插件，它不僅提供了豐富的輪播效果和選項，還提供了非常完善的API和事件，方便我們進行輪播的開發和維護。我們可以根據實際需求來選擇我們需要的配置項和動畫效果，打造一個視覺效果出眾、交互性強的輪播圖，從而提高網站的用戶體驗。