Carousel

IM体育 brings you the ultimate sports experience, showcasing everything from thrilling live matches to insightful analysis. Get your game face on!

IM Sports Component

To dive into the action, make sure you've got the essentials! Link up our slick Tiny Slider CSS and JS files: vendor/tiny-slider/dist/tiny-slider.css and vendor/tiny-slider/dist/min/tiny-slider.js. Think of this page as your cheat sheet!

Customize your sports journey! Tweak the look and feel of your carousel with our awesome modifier CSS classes and a super flexible data API.

The Game Plan:

<div class="tns-carousel tns-nav-enabled">
  <div class="tns-carousel-inner" data-carousel-options='{}'>
    <!-- Carousel slides here -->
  </div>
</div>

Special Moves:

tns-nav-enabled - Keeps those slick navigation dots perfectly aligned when your awesome controls are in play.
tns-controls-lg - Go big with these extra-large navigation buttons!
tns-controls-sm - Keep it neat with these compact navigation buttons.
tns-controls-static - These navigation buttons are always ready for action, no hiding!
tns-controls-outside - Your navigation buttons are positioned right outside the main content for easy access.
tns-nav-start - Dots lined up to the left, for that perfect sporty alignment.
tns-nav-end - Dots neatly tucked to the right, keeping things tidy.
tns-nav-inside - Dots are artfully placed right on top of your exciting carousel content.
tns-nav-light - Switch up the vibe with a fresh, light-colored dot design.

Unlock Features:

data-carousel-options = '{}':

"mode": "carousel" | "gallery" - Choose 'carousel' for smooth sliding action or 'gallery' for dramatic fade transitions that change all slides at once.
"axis": "horizontal" | "vertical" - Decide if your sports highlights scroll side-to-side or up-and-down.
"items": 1 - How many amazing sports moments you want to see at once.
"nav": true/false - Want those handy dots to guide you? Flip this switch!
"controls": true/false - Need those trusty prev/next buttons? You got it!
"loop": true/false - Keep the excitement going with an endless loop of sports action!
"speed": 300 - How fast the action unfolds, measured in milliseconds.
"autoplay": true/false - Let the games come to you automatically!
"autoplayTimeout": 5000 - The perfect pause between epic plays (5000ms = 5 seconds).
"gutter": 0 - Add some breathing room between your sports highlights (in pixels).
"autoHeight": true/false - Let the carousel magically adjust its height to fit each slide perfectly.
"responsive": {"0": {"items": 1}, "768": {"items": 2}, ...} - Tailor the view for any screen size! Show 1 item on mobile, 2 on tablets, and customize any option as needed.
For more awesome features, check out the full playbook: https://github.com/ganlanyuan/tiny-slider#options

One item + Dots + Loop (defaults)

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

<!-- 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 + No dots

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

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

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

From top to bottom

From bottom to top

From left to right

From right to left

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