加入購物車 輪播
im體育為您帶來最熱血的運動體驗，從緊張刺激的現場直播到深入淺出的賽事分析，應有盡有！準備好你的應援道具吧！
IM體育元件
要開始享受精彩內容，先備好基本配備！串接我們超好用的 Tiny Slider CSS 和 JS 檔案：vendor/tiny-slider/dist/tiny-slider.css 和 vendor/tiny-slider/dist/min/tiny-slider.js。把這頁當作你的必勝攻略就對了！
打造你的專屬運動頻道！利用超彈性的修飾 CSS 類別和資料 API，輕鬆調整輪播外觀與操作方式。
戰術佈局：
<div class="tns-carousel tns-nav-enabled">
<div class="tns-carousel-inner" data-carousel-options='{}'>
<!-- Carousel slides here -->
</div>
</div>絕招連發：
tns-nav-enabled- 輔助類別，用於在啟用導航點（圓點）時對齊絕對定位的控制項（上一個/下一個）。tns-controls-lg- 大型控制項（上一個/下一個按鈕）。tns-controls-sm- 小型控制項（上一個/下一個按鈕）。tns-controls-static- 控制項（上一個/下一個按鈕）始終可見。tns-controls-outside- 控制項（上一個/下一個按鈕）位於輪播內容外部。tns-nav-start- 導航點靠左對齊（預設為置中）。tns-nav-end- 導航點靠右對齊（預設為置中）。tns-nav-inside- 將導航點絕對定位在輪播內容上方。tns-nav-light- 將導航點樣式切換為淺色版本。
解鎖功能：
data-carousel-options = '{}': "mode": "carousel" | "gallery"- 輪播模式中所有項目向側邊滑動，而畫廊模式使用淡入淡出動畫並同時切換所有投影片。"axis": "horizontal" | "vertical"- 滑桿的軸向。"items": 1- 要顯示的項目數量"nav": true/false啟用/停用導航點控制"controls": true/false啟用/停用上一個/下一個箭頭按鈕"loop": true/false啟用/停用無限循環"speed": 300投影片動畫速度（單位：毫秒）"autoplay": true/false切換投影片自動切換功能"autoplayTimeout": 5000切換間隔時間。單位為毫秒 | 1000毫秒 = 1秒"gutter": 0輪播項目之間的間距（單位：像素）"autoHeight": true/false滑桿容器高度會根據每張投影片的高度自動調整。"responsive": {"0": {"items": 1}, "768": {"items": 2}, ...}每個螢幕尺寸要顯示的項目數量。選項不限於項目數量，您可以根據螢幕尺寸調整任何選項。- 更多選項請參閱https://github.com/ganlanyuan/tiny-slider#options
一個項目 + 導航點 + 循環（預設）
<!-- One item + Dots + Loop (defaults) -->
<div class="tns-carousel tns-nav-enabled">
<div class="tns-carousel-inner">
<img src="path-to-image" alt="Alt text">
<img src="path-to-image" alt="Alt text">
<img src="path-to-image" alt="Alt text">
</div>
</div>// One item + Dots + Loop (defaults)
.tns-carousel.tns-nav-enabled
.tns-carousel-inner
img(src="path-to-image", alt="Alt text")
img(src="path-to-image", alt="Alt text")
img(src="path-to-image", alt="Alt text")
一個項目 + 靜態控制項 + 內部導航點 + 無循環
<!-- One item + Static controls + Dots inside + No loop -->
<div class="tns-carousel tns-controls-static tns-nav-enabled tns-nav-light tns-nav-inside">
<div class="tns-carousel-inner" data-carousel-options='{"loop": false}'>
<img src="path-to-image" alt="Alt text">
<img src="path-to-image" alt="Alt text">
<img src="path-to-image" alt="Alt text">
</div>
</div>// One item + Static controls + Dots inside + No loop
.tns-carousel.tns-controls-static.tns-nav-enabled.tns-nav-light.tns-nav-inside
.tns-carousel-inner(data-carousel-options='{"loop": false}')
img(src="path-to-image", alt="Alt text")
img(src="path-to-image", alt="Alt text")
img(src="path-to-image", alt="Alt text")
垂直輪播 + 無導航點
<!-- Vertical carousel + Loop + No dots -->
<div class="tns-carousel">
<div class="tns-carousel-inner" data-carousel-options='{"axis": "vertical", "nav": false}'>
<img src="path-to-image" alt="Alt text">
<img src="path-to-image" alt="Alt text">
<img src="path-to-image" alt="Alt text">
</div>
</div>// Vertical carousel + Loop + No dots
.tns-carousel
.tns-carousel-inner(data-carousel-options='{"axis": "vertical", "nav": false}')
img(src="path-to-image", alt="Alt text")
img(src="path-to-image", alt="Alt text")
img(src="path-to-image", alt="Alt text")
多個項目 + 外部靜態控制項 + 無導航點 + 循環（響應式）
<!-- Multiple items + Static controls outside + No dots + Loop (Responsive) -->
<div class="tns-carousel tns-controls-static tns-controls-outside">
<div class="tns-carousel-inner" data-carousel-options='{"items": 3, "nav": false, "responsive": {"0":{"items":1},"500":{"items":2, "gutter": 18},"768":{"items":3, "gutter": 20}, "1100":{"gutter": 24}}}'>
<img src="path-to-image" alt="Alt text">
<img src="path-to-image" alt="Alt text">
<img src="path-to-image" alt="Alt text">
<img src="path-to-image" alt="Alt text">
</div>
</div>// Multiple items + Static controls outside + No dots + Loop (Responsive)
.tns-carousel.tns-controls-static.tns-controls-outside
.tns-carousel-inner(data-carousel-options='{"items": 3, "nav": false, "responsive": {"0":{"items":1},"500":{"items":2, "gutter": 18},"768":{"items":3, "gutter": 20}, "1100":{"gutter": 24}}}')
img(src="path-to-image", alt="Alt text")
img(src="path-to-image", alt="Alt text")
img(src="path-to-image", alt="Alt text")
img(src="path-to-image", alt="Alt text")
一個項目 + 淡入淡出轉場 + 導航點 + 循環
<!-- One item + Fade transition + Dots + Loop -->
<div class="tns-carousel tns-nav-enabled">
<div class="tns-carousel-inner data-carousel-options='{"mode": "gallery", "speed": 1000}'">
<img src="path-to-image" alt="Alt text">
<img src="path-to-image" alt="Alt text">
<img src="path-to-image" alt="Alt text">
</div>
</div>// One item + Fade transition + Dots + Loop
.tns-carousel.tns-nav-enabled
.tns-carousel-inner(data-carousel-options='{"mode": "gallery", "speed": 1000}')
img(src="path-to-image", alt"Alt text")
img(src="path-to-image", alt"Alt text")
img(src="path-to-image", alt"Alt text")
淡入淡出轉場 + 圖層動畫
從上到下
從下到上
從左到右
從右到左
<!-- Fade transition + Layer animations -->
<div class="tns-carousel">
<div class="tns-carousel-inner" data-carousel-options='{"mode": "gallery", "nav": false}'>
<div>
<div class="bg-faded-primary text-center py-5 px-3">
<h3 class="from-top">From top to bottom</h3>
<p class="fs-lg mb-4 pb-3 from-bottom delay-1">From bottom to top</p>
<button class="btn btn-primary scale-down delay-2" type="button">Scale down</button>
</div>
</div>
<div>
<div class="bg-faded-success text-center py-5 px-3">
<h3 class="from-start">From left to right</h3>
<p class="fs-lg mb-4 pb-3 from-end">From right to left</p>
<button class="btn btn-success scale-up delay-2" type="button">Scale up</button>
</div>
</div>
</div>
</div>// Fade transition + Layer animations
.tns-carousel
.tns-carousel-inner(data-carousel-options = '{"mode": "gallery", "nav": false}')
div
.bg-faded-primary.text-center.py-5.px-3
h3.from-top From top to bottom
p.fs-lg.mb-4.pb-3.from-bottom.delay-1 From bottom to top
button(type="button").btn.btn-primary.scale-down.delay-2
| Scale down
div
.bg-faded-success.text-center.py-5.px-3
h3.from-start From left to right
p.fs-lg.mb-4.pb-3.from-end From right to left
button(type="button").btn.btn-success.scale-up.delay-2
| Scale up