Carousel 輪播

輪播是一個用於循環顯示一系列內容的幻燈片。

設計
程式碼

網頁輪播類型

適用平台：官網、網銀PC

輪播項目建議五個內 (建議在 3~4個步驟或操作內，讓使用者看完所有資訊)

輪播導航箭頭	輪播分頁鈕	輪播示意圖

使用線框箭頭為主可依版型配置放輪播圖內或外用色以企業綠或白色為主	使用圓點為主，圓點長寬14px 兩點間距16px 若為深色背景，使用實心圓點 - 綠點：#00A19B - 白點：#fffff 若為淺色背景，使用實心圓點(active)及框線 - 綠點：#00A19B - 框線：#D9D9D9	-

app輪播類型

適用平台：網銀M、行銀

輪播導航箭頭	輪播分頁鈕	輪播示意圖

行銀版面較少使用輪播導航箭頭，若使用則參照官網規則	使用圓點為主，圓點長寬6px 兩點間距8px	-

輪播 (carousel)

SAMPLE

HTML

                                                            
//引入swiper套件
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="img/ui/swiperImg.png" class="max-w-800 d-block mx-auto"
                alt="">
        </div>
        <div class="swiper-slide">
            <img src="img/ui/swiperImg.png" class="max-w-800 d-block mx-auto"
                alt="">
        </div>
        <div class="swiper-slide">
            <img src="img/ui/swiperImg.png" class="max-w-800 d-block mx-auto"
                alt="">
        </div>

    </div>
    <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
</div>

複製

CSS

                                                                                    
.swiper-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.swiper-slide img{
    width: 100%;
}
.swiper-button-next, .swiper-button-prev {
  color: #00a19b;
}

.swiper-pagination {
  position: absolute;
  bottom: 20px !important;
  left: 50% !important;
  -webkit-transform: translateX(-50%) !important;
          transform: translateX(-50%) !important;
}
.swiper-pagination span {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid #d9d9d9;
  margin: 0 5px;
  background: #ffffff;
  opacity: 1;
}
.swiper-pagination .swiper-pagination-bullet-active {
  background: #00a19b;
  border: 1px solid #00a19b;
}

複製

                                                                                         
 const swiper = new Swiper('.swiper-container', {
            // If we need pagination
            pagination: {
                el: '.swiper-pagination',
            },
            // Navigation arrows
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });

複製