Swiper.js 輪播套件使用方式

Swiper.js 為 JS 的輪播套件,雖然 JS 也提供 Carousel,但是相較之下比較不彈性。

1-1 使用方式

Codepen 範例 ( 套用 Swiper.js )

Codepen 範例 2 ( BS + Swiper.js ,出處 12/8 每日任務 )

STEP 1 進入 Get Started 頁面

分別有 CDN 與 NPM 方使可導入此套件。

這邊使用 CDN 方式 ( .min 為壓縮檔 ) :

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

STEP 2 進入 Demos 頁面選擇要套用的樣式點選 Source Code

  • 進入 Source code 後複製 HTML 結構與 CSS 結構,CSS 部分可自行做調整。
  • <!-- Initialize Swiper -→ 部分可複製到 .js 檔案內。

1-2 點擊 Source Code 就可以看到此樣式套用的程式碼,重點分別是

  1. Link Swiper’s CSS (引入 CSS CDN)
  2. Demo styles (CSS 的部分,這邊可以斟酌使用)
  3. Swiper (HTML 結構)
  4. Swiper JS (引入 JS CDN)
  5. Initialize Swiper (JS 初始化設定,這個概念和在使用 AOS 一樣都需要做初始化的設定)

以上就是通通複製到我們的專案就對了,位置放對大致上就能動了

如果想客製化一些設定可以再參考他的 API 頁面

1-3 BS + Swiper.js 做出選單輪播效果

Swiper.js 輪播套件使用方式

作法

  1. 分別載入 BSSwiper.jsMaterial 的 CDN。
  2. 上方選單部分使用 BS / Navs : JavaScript behavior 第二個版型。
  3. 選單內的每個輪播圖片使用 BS Card 架構。
  4. 選取 Swiper.js 中 Navigation 框架,需引入框架中的 HTML 結構與 Initialize Swiper 。
    • 因為輪播預設為一張一張顯示,這邊可到  API 頁面 做其他細部設定,例如變四張一個輪播。
<nav>
    <div class="nav nav-tabs mb-4" id="nav-tab" role="tablist">
        <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab"
            aria-controls="nav-home" aria-selected="true">Bali<sup>128</sup></a>
    </div>
</nav>
<div class="tab-content" id="nav-tabContent">
    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
        <!-- Swiper Start-->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                                        <!--BS 的 Card 結構-->
                    <div class="card">
                        <img src="https://github.com/hexschool/webLayoutTraining1st/blob/master/week8/top1.jpg?raw=true"
                            class="card-img-top img-cover mb-2" alt="...">
                        <div class="card-body">..</div>
                    </div>
                </div>
                <div class="swiper-slide">..</div> 
                以此類推要的數量
            </div>
            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
        <!-- Swiper End-->
    </div>
        <!-- Add Arrows -->
    <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">Okinawa</div>
    <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">Taipei</div>
</div>
var swiper = new Swiper('.swiper-container', {
    slidesPerView :4 ,  //同時顯示的slides數量
    spaceBetween: 30,   //slide之間的距離 (單位px)
    loop: true,
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

資料來源

六角學院

最後修改日期: 30 12 月, 2020

作者