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>