Swiper.min.css——你必須知道的網頁輪播庫

一、基礎使用

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    ...
  </div>
  <!-- 如果需要分頁器 -->
  <div class="swiper-pagination"></div>
  <!-- 如果需要導航按鈕 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <!-- 如果需要滾動條 -->
  <div class="swiper-scrollbar"></div>
</div>

Swiper.min.css是一個非常易於使用和高度可定製的輪播庫，可以通過HTML、CSS和JavaScript輕鬆控制各種功能。上面是最基本的HTML結構代碼，Swiper將這個結構轉換成非常酷炫的輪播效果。

可以看到，Swiper將輪播的主要容器包含在一個類名為「swiper-container」的div中。每一張輪播圖片或內容都應該包含在一個類名為「swiper-slide」的div中，然後再將所有的slide包含在一個類名為「swiper-wrapper」的div中。

在Swiper中，有3種分頁器類型可以選擇：圓點分頁器「pagination」、分頁器插件「fraction」和進度條型分頁器「progressbar」，可以通過以下代碼選用分頁器：

// 圓點分頁器
.pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
}
.pagination-bullet-active {
  background: #000;
}

// 分頁器插件
.swiper-pagination-fraction {
  display: inline-flex;
  font-size: 18px;
  font-weight: bold;
}

// 進度條型分頁器
.swiper-pagination-progressbar {
  background: rgba(0, 0, 0, 0.1);
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: #000;
}

除了分頁器之外，還有「swiper-button-prev」和「swiper-button-next」兩個按鈕可以添加。他們分別代表向左和向右輪播的按鈕：直接添加類名即可，Swiper會自動識別。也可以使用以下代碼進行定製：

.swiper-button-prev,
.swiper-button-next {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  margin-top: -25px;
  z-index: 10;
  cursor: pointer;
}

.swiper-button-prev:after,
.swiper-button-next:after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 17px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.swiper-button-prev {
	left: 20px;
}

.swiper-button-prev:after {
  background-image: url("path/to/prev.png");
}

.swiper-button-next {
	right: 20px;
}

.swiper-button-next:after {
  background-image: url("path/to/next.png");
}

二、自適應輪播

Swiper還提供了一些處理自適應輪播的選項，你可以通過指定不同的寬度，來分別適配PC、pad或者手機：

// PC端
.swiper-container {
  width: 1200px;
  height: 500px;
}

// pad端
@media screen and (max-width: 768px) {
  .swiper-container {
    width: 720px;
    height: 300px;
  }
}

// 手機端
@media screen and (max-width: 480px) {
  .swiper-container {
    width: 320px;
    height: 200px;
  }
}

三、設置輪播時間

Swiper提供了「autoplay」選項來設置輪播時間：

autoplay: {
  delay: 3000, // 輪播間隔
  disableOnInteraction: false // 用戶操作之後是否停止自動播放
}

四、定製樣式

Swiper提供了豐富的CSS類，用於定製各種樣式和動畫。以下是一些常用的類名：

// 輪播容器
.swiper-container

// 輪播區域
.swiper-wrapper

// 輪播內容
.swiper-slide

// 輪播分頁器
.swiper-pagination

// 分頁器中的每個子元素
.swiper-pagination-bullet

// 分頁器中的當前子元素
.swiper-pagination-bullet-active

// 左側按鈕
.swiper-button-prev

// 右側按鈕
.swiper-button-next

// 進度條分頁器
.swiper-pagination-progressbar

// 分頁器百分比
.swiper-pagination-progressbar-fill

// 垂直方向輪播
.swiper-container-vertical

// 水平方向輪播
.swiper-container-horizontal

// 活動狀態
.swiper-slide-active

五、如何引入Swiper.min.css

在HTML中，我們使用以下代碼引入Swiper.min.css：

<link rel="stylesheet" href="path/to/swiper.min.css">

然後，我們需要引入Swiper的JavaScript代碼：

<script src="path/to/swiper.min.js"></script>

六、結語

Swiper.min.css是一個非常強大而靈活的輪播庫，它可以輕鬆創建各種類型的滑塊、幻燈片、卡片等等。寫好HTML結構和CSS樣式後，整個Swiper的控制權都可以從JavaScript中進行操作。Swiper.min.css代碼簡單易懂，尤其是對於那些初學者來說，是一個非常好的選擇。