此網站需要開啟JavaScript
JavaScript is required

Slider

三種輪播都建立在 Swiper 之上。同一頁放多個時,id 一定要給不同值,否則 Swiper 會抓錯容器。

單張輪播

CommonSliderBasicSingle

components/Common/Slider/Basic/Single.vue

一次顯示一張,適合主視覺。 loop 與 autoplay 分開控制。

自動播放 + 循環

輪播項目 1
輪播項目 2
輪播項目 3
輪播項目 4
輪播項目 5
輪播項目 6

Props

名稱型別預設值說明
id*String''同一頁多個輪播時必須給不同 id
sliderData*Array<{ title, img_url }>[]
spaceBetweenNumber0每張之間的間距(px)
paginationIdString''分頁指示器的容器 id
loopBooleanfalse
autoplayBooleanfalse

* 為必填

置中多張輪播

CommonSliderBasicCenter / Right

components/Common/Slider/Basic/{Center,Right}.vue

Center 讓目前這張置中、前後各露一截; Right 則是靠左對齊、右側露出下一張。 兩者 props 相同,只差在對齊方式。

用 sliderNum 決定一次顯示幾張。

一次顯示三張(置中)

輪播項目 1
輪播項目 2
輪播項目 3
輪播項目 4
輪播項目 5
輪播項目 6

靠左對齊

輪播項目 1
輪播項目 2
輪播項目 3
輪播項目 4
輪播項目 5
輪播項目 6

Props

名稱型別預設值說明
id*String''
sliderData*Array<{ title, img_url }>[]
sliderNumNumber1一次顯示幾張
sliderAutoBooleanfalse自動播放
sliderDistanceNumber0位移距離
spaceBetweenNumber0
paginationIdString''

* 為必填