這篇文章要介紹如何利用 CSS 創建一個基本的滑動幻燈片（Slider），實現平滑的圖片過渡效果

HTML

創建一個名為 slider-wrapper 的容器，其中包含三張圖片，這樣每張圖片都能在同一個容器中顯示，並實現滑動效果

<div class="slider-wrapper">
    <img class="slider-item" src="picture1.jpeg" alt="Slide1">
    <img class="slider-item" src="picture2.png" alt="Slide 2">
    <img class="slider-item" src="picture3.jpg" alt="Slide 3">
</div>

• slider-wrapper： 是整個幻燈片的外部容器，負責控制所有內部圖片的顯示和排版
• slider-item ： 每張圖片使用 slider-item 類別來進行統一樣式控制

CSS

1. 設定整個頁面的樣式

使用 Flexbox 將 body 的內容在水平方向和垂直方向上都居中顯示，讓幻燈片位於畫面正中間，並利用 height設置高度，佔滿整個視窗

body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;
}

2. 容器樣式

設定 slider-wrapper 的大小，確保容器的大小固定能夠正常顯示圖片，及隱藏超出範圍的內容

.slider-wrapper {
    width: 400px; 
    height: 300px;
    overflow: hidden; 
    position: relative;
}

• overflow : 隱藏超出容器範圍的圖片部分

3. 圖片樣式

設定每張圖片的樣式，確保它們能夠重疊顯示，並添加動畫效果

.slider-item {
    width: 100%; 
    height: 100%;
    position: absolute; 
    transform: translateX(100%); 
    opacity: 0;
    animation: slide 12s infinite; 
}

• position : absolute : 讓每張圖片都能重疊在一起。
• transform : translateX(100%) : 將每張圖片初始位置設定在容器的右側外部，這樣在開始動畫時才可以從右側進入
• animation : 定義一個名為 slide 的動畫，每 12 秒會重複一次

4. 每張圖片的動畫延遲

為了實現圖片的逐個顯示，每張圖片設置不同的動畫延遲時間

.slider-item:nth-child(1) {
    animation-delay: 0s;
}

.slider-item:nth-child(2) {
    animation-delay: 4s; 
}

.slider-item:nth-child(3) {
    animation-delay: 8s; 
}

• nth-child(n) : 針對每一張圖片設置不同的動畫延遲，讓它們依次出現
• animation-delay ： 確保每張圖片在其相應的時間點開始動畫，形成連續的滑動效果

5. 定義滑動動畫

定義每張圖片在時間進程中的變化，透過 transform 和 opacity 實現圖片的顯示、隱藏和滑動效果

@keyframes slide {
    0%, 20% {
        transform: translateX(0); 
        opacity: 1; 
    }
    25%, 45% {
        transform: translateX(-100%); 
        opacity: 1; 
    }
    50% {
        transform: translateX(-100%); 
        opacity: 0; 
    }
    55%, 100% {
        transform: translateX(100%); 
        opacity: 0; 
    }
}

• 0%，20% ： 在動畫的開始和前 20% 時，圖片保持在初始位置，並完全可見
• 25%，45% ： 圖片會往左滑動至畫面外translateX(-100%)，此時仍然可見opacity: 1
• 50% ： 圖片會保持在左側的位置，但變得不可見opacity: 0，表示當前圖片已經完全滑出畫面，準備進入下一張圖片
• 55%，100% : 圖片將會滑動到右側外部 translateX(100%)，並保持不可見，確保當前圖片完全滑出後，能夠為下一張圖片的進入留出空間

結果呈現

• 圖片來源:
  圖片1
  圖片2
  圖片3