輪播

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) - im体育

<!-- 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 - im体育

<!-- 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 (R - im体育

<!-- 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 - im体育

<!-- 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