轮播

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