Carousel

Carousel 用於圖片、影音或是文字的幻燈片輪播效果。組件容器的類別名稱為 .carousel ,並且以此作為子組件前綴詞。所有媒體資料會集中至 .carousel_stage 存放,每一個項目皆為 .carousel_item 並且預設透明度為 0,直到添加 .is:on 才會顯示。

<div class="carousel"> <div class="carousel_stage"> <div class="carousel_item is:on"></div> <div class="carousel_item"></div> ... </div> </div>

控制元件

加入上一頁與下一頁的控制元件,可在 .carousel 底下加入。

<div class="carousel"> <div class="carousel_stage"> ... </div> <button class="carousel_ctrl :prev"></button> <button class="carousel_ctrl :next"></button> </div>

指示器

也可以在底部添加指示器隨時切換內容。

<div class="carousel"> <div class="carousel_stage"> ... </div> <button class="carousel_ctrl :prev"></button> <button class="carousel_ctrl :next"></button> <div class="carousel_nav"> <button class="carousel_nav_item is:on"></button> <button class="carousel_nav_item"></button> <button class="carousel_nav_item"></button> </div> </div>

指示器也可以更改樣式為圓點,只要在指示器加上 :dot

<div class="carousel"> <div class="carousel_stage"> ... </div> <button class="carousel_ctrl :prev"></button> <button class="carousel_ctrl :next"></button> <div class="carousel_nav :dot"> <button class="carousel_nav_item is:on"></button> <button class="carousel_nav_item"></button> <button class="carousel_nav_item"></button> </div> </div>