# Swiper

[中文官網](https://www.swiper.com.cn/)

#### CDN

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

#### 基礎結構

<!-- 單純做自動輪播 -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
</div>
<!-- 其他需求 -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</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>

<script>        
  let mySwiper = new Swiper ('.swiper-container', options);     
</script>

#### 參數設定紀錄

let carousel = new Swiper('.carousel-container', {
    autoHeight: true, //enable auto height
    slidesPerView: 'auto', // 自動根據容器寬度展示內容
    autoplay: false, // 自動換頁
    speed: 1800, // 換頁速度
    delay: 3000, // 每頁停留時間 預設 3000
    loop: true, // 無限輪播
    effect: 'fade', // 換頁動態效果 預設 slide (除這兩種也沒啥其他好選擇了)
    stopOnLastSlide: true, // 最後一頁時停止播放 預設 false (會反向轉回第一頁)
    allowTouchMove: false, // 禁止被拖曳
    mousewheel: true, // 接受滾輪滾動觸發換頁 預設 false (可設定方向)
    grabCursor: true, // 開啟時用戶鼠標 hover 時會變成手形 
    parallax: true, // 允許滾動視差 (需搭配 html data 參數)
    spaceBetween: 15, // 每一塊的間距
    direction: 'vertical', // 切换成垂直
    pagination: { // 分頁點點
        el: '.swiper-pagination',
        clickable: true,
    },
    navigation: { // 若需要按鈕
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    scrollbar: { // 若需要滾動條
      el: '.swiper-scrollbar',
    },
    breakpoints: { // 斷點顯示設定
      320: {  // 當裝置寬大於 320 
        slidesPerView: 2, // 要看見幾頁內容 (可用小數點讓使用者知道可滑動)
        spaceBetween: 10
      },
      768: {  // 當裝置寬大於 768
        slidesPerView: 3,
        spaceBetween: 20
      },
      1200: {  // 當裝置寬大於 1200 
        slidesPerView: 4,
        spaceBetween: 30
      }
    },
    on:{
      click: function(){
          // do something
      }
      // 有許多事件類型可觸發
    }
});

#### 方便複製版

let carousel = new Swiper('.swiper-container', {
    autoHeight: true,
    slidesPerView: 'auto',
    navigation: { 
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    breakpoints: { 
      320: {  
        slidesPerView: 2,
        spaceBetween: 10
      },
      768: {  
        slidesPerView: 3,
        spaceBetween: 20
      },
      1200: {  
        slidesPerView: 4,
        spaceBetween: 30
      }
    },
    autoplay: false, 
    speed: 1800, 
    delay: 3000, 
    loop: true, 
    stopOnLastSlide: true, 
    allowTouchMove: false, 
    mousewheel: true, 
    grabCursor: true, 
    parallax: true, 
    spaceBetween: 15,
    direction: 'vertical', 
        effect: 'fade', 
    pagination: { 
        el: '.swiper-pagination',
        clickable: true,
    },
    scrollbar: { 
      el: '.swiper-scrollbar',
    },
    on:{
      click: function(){
          // do something
      }
      // 有許多事件類型可觸發
    }
});

#### 操作 API 紀錄

carousel.slideNext(speed,cb); // 往下一頁滑動 (可不傳任何參數)