Swiper 簡單應用：打造流暢的輪播效果

Swiper 簡單應用：打造流暢的輪播效果 | Liwen Studio | Liwen Studio

javascript source case

javascript

const swiper = new Swiper(".swiper", {
  // 間距 24px
  spaceBetween: 24,
  pagination: {
    el: ".swiper-pagination"
  },
  // 左右箭頭
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  },
  // 一次呈現三個
  slidesPerView: 3,
  // 滾動條
  scrollbar: {
    el: ".swiper-scrollbar"
  },
  autoplay: true,

  // 響應式設定（類似 Bootstrap 的斷點）
  breakpoints: {
    // 0px 以上（手機）
    0: {
      slidesPerView: 1
    },
    // 768px 以上（平板）
    768: {
      slidesPerView: 2
    },
    // 992px 以上（桌機）
    992: {
      slidesPerView: 3
    }
  }
});

html source case

html


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">


<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

html source case

html

<div class="swiper">
    
    <div class="swiper-wrapper">
      
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
        <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 簡單應用：打造流暢的輪播效果

Swiper 簡單應用

引用

基本 HTML 架構

CSS

JavaScript

分享這篇技術心得 / Share

React Router 核心指南

延伸閱讀 / Related Cases

useEffect：與外部世界互動的橋樑

useRef：掌握 React 的「儲物櫃」與 DOM 操控