加入购物车 轮播推荐
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" - 选'carousel'实现平滑滑动，选'gallery'实现炫酷淡入淡出。
- "axis": "horizontal" | "vertical" - 决定你的体育集锦是横向滚动还是纵向滚动。
- "items": 1 - 一次显示多少个精彩体育瞬间。
- "nav": true/false - 想要导航小圆点？一键切换！
- "controls": true/false - 需要前后翻页按钮？没问题！
- "loop": true/false - 开启无限循环，体育激情不停歇！
- "speed": 300 - 动作切换速度，单位毫秒。
- "autoplay": true/false - 让比赛自动为你播放！
- "autoplayTimeout": 5000 - 精彩瞬间之间的完美停顿（5000毫秒=5秒）。
- "gutter": 0 - 在体育集锦之间添加一点呼吸空间（单位像素）。
- "autoHeight": true/false - 让轮播自动调整高度，完美适配每一张幻灯片。
- "responsive": {"0": {"items": 1}, "768": {"items": 2}, ...} - 为任何屏幕尺寸量身定制！手机显示1项，平板显示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