中文 前端教學

網頁前端圖片輪播套件 | 3D 自動播放 公告 | Swiper | 5分鐘使用

[email protected]

網頁前端圖片輪播，讓我們來輕鬆實現多種吸引人的圖片輪播效果，我個人超推Swiperjs套件來呈現圖片、文字或公告，裏面提供超多輪播方式給我們選擇，包括幻燈片的垂直和水平方向、3D旋轉、卡片式輪播、漸進式…等，這些效果直接提升網站的設計感，下面主要展示我個人認為好用，同時用在公司形象網站中的幾種輪播，讓我們馬上來玩玩看。

Swiperjs 官網(有範例參考)

Swiperjs GitHub(程式原始碼)

網頁前端圖片輪播-Swiper

Page 1
Page 2
Page 3

步驟說明

  1. 引入套件CSS、JavaScript
    – CSS 放置於 <head></head> 內
    網頁前端圖片輪播
    – JavaScript 放置於 </body> 之前
    網頁前端圖片輪播
  2. 加入HTML、JavaScript
    – 創建一個<div class=”swiper”>
    – 創建一個<div class=”swiper-wrapper”>
    – 創建多個<div class=”swiper-slide”>
    – 創建前後頁按鈕<div class=”swiper-button-prev”>、<div class=”swiper-button-next”>
    – JavaScript創建一個 Swiper
    – 設定屬性與功能
    (Note:swiper、swiper-slide 可以先在 css 自定義一些樣式，下方第一段程式碼 <!– 自定義的style放在<head>內 –>)
  3. 附上程式碼
<!-- 自定義的style放在<head>內 -->
<style>
    .swiper {
        width: 300px;
        height: 300px;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
</head>

<body>

    <div class="swiper"> <!-- swiper class 會被 new Swiper('.swiper' 使用 -->
        <div class="swiper-wrapper"> <!-- 讓Swiper知道要輪播的內容位置必須為 swiper-wrapper -->
            <div class="swiper-slide">Page 1</div>
            <div class="swiper-slide">Page 2</div>
            <div class="swiper-slide">Page 3</div>
        </div>

        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script>
        const swiper = new Swiper('.swiper', { // 創建一個輪播
            autoplay: { // 自動輪播 swiper
                delay: 2 * 1000, // 每兩秒切換下一張
            },
            loop: true, // 輪播結束後回到第一張繼續輪播
            navigation: { // 前一張、下一張按鈕
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    </script>
</body>

</html>

程式碼說明

  1. new Swiper 創建一個輪播
  2. <div class=”swiper”>
    在JavaScript區塊中new Swiper(‘.swiper’)，會去找Html是否有swiper的class標籤
  3. <div class=”swiper-wrapper”>
    Swiper會找swiper-wrapper的class標籤，並將它設定為輪播內容位置
  4. <div class=”swiper-slide”>
    Swiper再將class為swiper-slide的標籤視為一個內容
    <div>標籤內容放你想顯示的輪播內容(ex: 圖片、影片、文字)
  5. 如果在JavaScript區塊中有使用”navigation”這個物件
    會去找nextEl、prevEl相對應class的標籤，並將他設定為前後頁按鈕
    (如果只想讓使用者往下切可以只放 <div class=”swiper-button-next”>)

進階用法

頁籤式

Page 1
Page 2
Page 3
Page 4
Page 5
Page 6

– 新增 <div class=”swiper-pagination”></div> 並將切換前後按鈕的div移除(也可以保留)
– new Swiper新增”pagination”物件
   將el的值設定剛新增的div class “.swiper-pagination”
– pagination底下dynamicBullets用來呈現切換頁的動畫(可關閉)

網頁前端圖片輪播 
<body>

    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Page 1</div>
            <div class="swiper-slide">Page 2</div>
            <div class="swiper-slide">Page 3</div>
            <div class="swiper-slide">Page 4</div>
            <div class="swiper-slide">Page 5</div>
            <div class="swiper-slide">Page 6</div>
        </div>

        <div class="swiper-pagination"></div> <!-- 頁籤 -->
    </div>


    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script>
        const swiper = new Swiper('.swiper', {
            pagination: { // 使用頁籤方法
                el: ".swiper-pagination", // 找到class為swiper-pagination的標籤
                dynamicBullets: true, // 是否使用動畫
            },
        });
    </script>
</body>

進度條

Page 1
Page 2
Page 3
Page 4
Page 5
Page 6

– “pagination”底下加入type屬性並給予”progressbar”產生進度條

<body>
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Page 1</div>
            <div class="swiper-slide">Page 2</div>
            <div class="swiper-slide">Page 3</div>
            <div class="swiper-slide">Page 4</div>
            <div class="swiper-slide">Page 5</div>
            <div class="swiper-slide">Page 6</div>
        </div>

        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script>
        const swiper = new Swiper('.swiper', {
            pagination: {
                el: ".swiper-pagination",
                type: "progressbar", // 顯示進度條
            },
            navigation: { // 前一張、下一張按鈕
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    </script>
</body>

頁數切換

Page 1
Page 2
Page 3
Page 4
Page 5
Page 6

– “pagination”底下加入clickable屬性表示可點擊
– “pagination”底下加入renderBullet並以html客製化數字按鈕
   className為按鈕的class
   index為<div class=”swiper-slide”>的陣列從0開始所以需要 +1 來顯示相對應的數字

/* 加入數字頁籤的style */
.swiper-pagination-bullet { /* 圓圈 */
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    color: #000;
    opacity: 1;
    background: rgba(0, 0, 0, 0.2);
}
.swiper-pagination-bullet-active { /* 目前所選的圓圈 */
    color: #fff;
    background: #e5be20;
}
<body>
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Page 1</div>
            <div class="swiper-slide">Page 2</div>
            <div class="swiper-slide">Page 3</div>
        </div>

        <div class="swiper-pagination"></div>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script>
        const swiper = new Swiper('.swiper', {
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
                renderBullet: function (index, className) {
                    return '<span class="' + className + '">' + (index + 1) + "</span>";
                },
            },
        });
    </script>
</body>

效果覆蓋流(Effect coverflow)

網頁前端圖片輪播
網頁前端圖片輪播

– 電腦能看到整體效果
– <div class=”swiper-slide”> 我們輪播內容放 img (圖片大小最好跟class相同, 我是用正方形)
– 針對 swiper、swiper-slide css 調整成自己想要的大小
– 加入effect屬性為”coverflow”
– grabCursor可以讓使用者感覺用抓的在移動輪播內容UX提升
– centeredSlides讓內容置中顯示
– slidesPerView顯示所有的內容(透過swiper大小設定隱藏後面的輪播內容)
– coverflowEffect相關屬性設定大家可以針對喜好調整數值試試看

網頁前端圖片輪播 
.swiper { /* 整個swiper大小 */
     width: 50%;
     height: 300px;
     padding-top: 50px;
     padding-bottom: 50px;
}

.swiper-slide { /* 每個swiper-slide內容大小 */
     background-position: center;
     background-size: cover;
     width: 300px;
     height: 300px;
}

.swiper-slide img { /* 圖片大小 */
     display: block;
     width: 100%;
}
<body>
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="圖片網址" /> <!-- 拍謝,這邊我們各自去找圖片 -->
            </div>
            <div class="swiper-slide">
                <img src="圖片網址" /> <!-- 拍謝,這邊我們各自去找圖片 -->
            </div>
            <div class="swiper-slide">
                <img src="圖片網址" /> <!-- 拍謝,這邊我們各自去找圖片 -->
            </div>
            <div class="swiper-slide">
                <img src="圖片網址" /> <!-- 拍謝,這邊我們各自去找圖片 -->
            </div>
        </div>

        <div class="swiper-pagination"></div>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script>
        const swiper = new Swiper('.swiper', {
            effect: "coverflow", // 打開coverflow效果
            grabCursor: true, // 滑到內容上時更改滑鼠樣式變成手套
            centeredSlides: true, // 內容頁置中
            slidesPerView: "auto", // 預覽每個內容頁
            coverflowEffect: {
                rotate: 50, // 內容角度
                stretch: 0, // 前後張距離
                depth: 0, // 與目前內容的前後距離(設成1000可以知道我在說啥)
                modifier: 1, // 兩側傾斜度
                slideShadows: true, // 前後內容陰影
            },
            pagination: {
                el: ".swiper-pagination",
            },
        });
    </script>
</body>

3D方塊旋轉

– 加入effect屬性設定為cube
– cubeEffect 方塊的相關屬性

網頁前端圖片輪播 
.swiper {
    width: 300px;
    height: 300px;
}

.swiper-slide img {
    display: block;
    width: 100%;
}
<body>
    <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="圖片網址" />
          </div>
          <div class="swiper-slide">
            <img src="圖片網址" />
          </div>
          <div class="swiper-slide">
            <img src="圖片網址" />
          </div>
          <div class="swiper-slide">
            <img src="圖片網址" />
          </div>
        </div>
        <div class="swiper-pagination"></div>
     </div>

    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script>
        const swiper = new Swiper('.swiper', {
            effect: "cube", // 效果3D方塊
            autoplay: {
                delay: 2500, // 每2.5自動播放
                disableOnInteraction: false, // 使用者切換頁時是否關閉自動播放
            },
            loop: true, // 播到最後一張是否可重新回第一張播放
            grabCursor: true, // 手手
            cubeEffect: {
                shadow: true, // 陰影
                slideShadows: true,
                shadowOffset: 20, // 陰影跟cube距離
            },
            pagination: {
                el: ".swiper-pagination",
            },
        });
    </script>
</body>

總結

Swiperjs網頁前端圖片輪播套件首選真的優，公司首頁、形象官網都非常適用，提供很多輪播方式，上面的舉例我相信很夠用在大家開發的專案內，幾個簡單的引用直接變幻無窮，如果不夠想看哪種方式，大家可以留言給我，或是任何操作有疑問都可以讓我知道，我會盡量在一週內回覆你留言與透過email回覆給你，祝各位開發順利。

Related Posts

中文 前端教學

網頁前端拖曳套件 | 元素排序 移動 拖放 | SortableJS | 3分鐘Move

[email protected]
中文 前端教學

網頁前端行事曆(FullCalendar)教學 | 紀錄 事件 應用 | FullCalendar | 10分鐘熟悉

[email protected]

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *