---
tags: BTS
---
---
# BTS Splide

https://demo-fuhshyan.gtmc.app/en
產品大類
*手機版以上沒有輪播
*手機版開啟輪播(不loop 置中 顯示1.2p 頭尾允許空格)

<splide class="index-product-categories__content" type="splide" 
  data-type="slide" 
  data-perPage="4" 
  data-destroy="true"
  data-gap="15" 
  data-pagination="false" 
  data-perMove="1" 
  data-focus="0"
  
  data-.............
  
  data-breakpoints="{ 
    480: {
      destroy: false, 
      perPage:1.2, 
      focus:'center', 
      trimSpace: false
    } 
  }"
 >

### 參數說明
* type="splide"
設定使用 splide
* data-type="slide"
類型 有'slide', 'loop', 'fade'
* data-perpage="4"
在頁面中顯示的幻燈片數量
* data-gap="15"
幻燈片之間的間隙
* data-pagination="false"
分頁（指示點）
* data-perMove="1"
一次移動的幻燈片數量
* data-autoplay="true"
自動播放
* data-interval="1500"
播放間隔時間
* data-focus="0"
如果頁面中有多張幻燈片，則確定哪張幻燈片應處於活動狀態
* data-breakpoints
斷點的響應選項集合
集合裡面不加data，布林/數字不加引號，字串要加引號

雲龍整理參數
https://docs.google.com/spreadsheets/d/1Dra2KFM1HtvDEbw6tVVlfc-kuOwR-IKwWPUp1IhDMiY/edit#gid=0

### 數字
典修 自行新增的選項(應該就這5個吧)
(const 預設值)
檔名：splide.js

可以直接去看 splide.js
搜尋 const DEFAULTS

const DEFAULTS = {

/** (輪播分頁器為數字型態 預設: false。例: 1 / 4)
   * Whether to append number.
   *
   * @type {boolean}
   */
  numbers: false,

  /** (輪播分頁器中用來分隔兩邊的符號  預設: '/')
   * Whether to number spliter is.
   *
   * @type {string}
   */
  numberSpliter: '/',

  /** (輪播分頁器 補數  預設: 0。例: 1 / 4　若將值改１則會變成 01 / 04...以此類推)
   * numbers of Complement
   *
   * @type {string}
   */
  numberComplement: 0,

  /** (是否附加進度條 預設: false......跟我想像的有點不一樣)
   * Whether to append progressbar.
   *
   * @type {boolean}
   */
  progressbar: false,

  /** (幻燈片可以點擊來改變活動 預設: false)
   * Slide can click to change active
   *
   * @type {boolean}
   */
  activeByClick: false

}

<splide class="index-application__content"
  type="splide"
  data-type="loop"
  data-perpage="1"
  data-gap="30"
  data-pagination="true"
  data-permove="1"
  data-focus="0"
  data-arrows="false"
  data-numbers="true"
  data-numberspliter="/"
  data-numbercomplement="1"
 >