Carousel

A slideshow component for cycling through elements (images or slides of text) like a carousel.

Around component

Make sure to link to Tiny Slider css and js files in your document: vendor/tiny-slider/dist/tiny-slider.css and vendor/tiny-slider/dist/min/tiny-slider.js. Use this page as a reference.

You can alter carousel look and behaviour via modifier CSS classes and flexible data API.

Basic HTML structure:

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

Modifier classes:

tns-controls-center - Center align controls (prev/next buttons).
tns-controls-left - Left align controls (prev/next buttons).
tns-controls-inside - Position controls (prev/next buttons) absolutely on top of the carousel content (on sides). Will not work with the above positioning classes.
tns-controls-onhover - Show controls (prev/next buttons) only when user hovers over the carousel. Works only with tns-controls-inside
tns-nav-inside - Position dots absolutely on top of the carousel content.
tns-nav-light - Switch dots skin to light version.

Data API:

data-carousel-options = '{}':

"mode": "carousel" | "gallery" - With carousel everything slides to the side, while gallery uses fade animations and changes all slides at once.
"axis": "horizontal" | "vertical" - The axis of the slider.
"items": 1 - How many items to display
"nav": true/false - Enable/disable dots control
"controls": true/false - Enable/disable prev / next arrow buttons
"loop": true/false - Enable/disable infinite loop
"speed": 300 - Speed of the slide animation (in "ms")
"autoplay": true/false - Toggles the automatic change of slides
"autoplayTimeout": 5000 - Timeou between transition. Value in ms | 1000ms = 1s
"gutter": 0 - Space between carousel items (in px)
"autoHeight": true/false - Height of slider container changes according to each slide's height.
"responsive": {"0": {"items": 1}, "768": {"items": 2}, ...} - How many items to display on each screen size. Options are not limited to number of items. You can change any option based on screen size.
For more options please visithttps://github.com/ganlanyuan/tiny-slider#options

Layer animation classes:

from-top
from-bottom
from-left
from-right
scale-up
scale-down
fade-in
delay-1
delay-2
delay-3
delay-4

All controls: Dots + Arrows + Progress

1of3

<!-- All controls: Dots + Arrows + Progress -->
<div class="tns-carousel-wrapper tns-nav-inside tns-nav-light">
  <div class="tns-carousel-progress ms-auto mb-3">
    <div class="text-sm text-muted text-center mb-2">
      <span class="tns-current-slide me-1"></span>
      of
      <span class="tns-total-slides ms-1"></span>
    </div>
    <div class="progress">
      <div class="progress-bar bg-primary" role="progressbar"></div>
    </div>
  </div>
  <div class="tns-carousel-inner" data-carousel-options='{"loop": false, "gutter": 15}'>
    <div>
      <img class="rounded-3" src="path-to-image" alt="Image"/>
    </div>
    <div>
      <img class="rounded-3" src="path-to-image" alt="Image"/>
    </div>
    <div>
      <img class="rounded-3" src="path-to-image" alt="Image"/>
    </div>
  </div>
</div>

// All controls: Dots + Arrows + Progress
.tns-carousel-wrapper.tns-nav-inside.tns-nav-light
  .tns-carousel-progress.ms-auto.mb-3
    .text-sm.text-muted.text-center.mb-2
      span.tns-current-slide.me-1
      | of
      span.tns-total-slides.ms-1
    .progress
      .progress-bar.bg-primary(role="progressbar")
  .tns-carousel-inner(data-carousel-options = '{"loop": false, "gutter": 15}')
    div
      img(src="path-to-image", alt="Image").rounded-3
    div
      img(src="path-to-image", alt="Image").rounded-3
    div
      img(src="path-to-image", alt="Image").rounded-3

Controls position: Dots outside + Arrows inside

<!-- Controls position: Dots outside + Arrows inside -->
<div class="tns-carousel-wrapper tns-controls-inside">
  <div class="tns-carousel-inner" data-carousel-options='{"gutter": 15}'>
    <div>
      <img class="rounded-3" src="path-to-image" alt="Image"/>
    </div>
    <div>
      <img class="rounded-3" src="path-to-image" alt="Image"/>
    </div>
    <div>
      <img class="rounded-3" src="path-to-image" alt="Image"/>
    </div>
  </div>
</div>

// Controls position: Dots outside + Arrows inside
.tns-carousel-wrapper.tns-controls-inside
  .tns-carousel-inner(data-carousel-options = '{"gutter": 15}')
    div
      img(src="path-to-image", alt="Image").rounded-3
    div
      img(src="path-to-image", alt="Image").rounded-3
    div
      img(src="path-to-image", alt="Image").rounded-3

Fade transition + Layer animations

From top to bottom

From bottom to top

<!-- Fade transition + Layer animations -->
<div class="tns-carousel-wrapper tns-controls-center">
  <div class="tns-carousel-inner" data-carousel-options='{"mode": "gallery", "nav": false}'>
    <div>
      <div class="rounded-3 bg-faded-primary text-center py-6 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="rounded-3 bg-faded-success text-center py-6 px-3">
        <h3 class="from-left">From left to right</h3>
        <p class="fs-lg mb-4 pb-3 from-right">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-wrapper.tns-controls-center
  .tns-carousel-inner(data-carousel-options = '{"mode": "gallery", "nav": false}')
    div
      .rounded-3.bg-faded-primary.text-center.py-6.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
      .rounded-3.bg-faded-success.text-center.py-6.px-3
        h3.from-left From left to right
        p.fs-lg.mb-4.pb-3.from-right From right to left
        button(type="button").btn.btn-success.scale-up.delay-2
          | Scale up

Vertical carousel + Arrows visible on hover

<!-- Vertical carousel + Arrows visible on hover -->
<div class="tns-carousel-wrapper tns-nav-inside tns-nav-light tns-controls-inside tns-controls-onhover">
  <div class="tns-carousel-inner" data-carousel-options='{"axis": "vertical", "gutter": 15}'>
    <div>
      <img class="rounded-3" src="path-to-image" alt="Image"/>
    </div>
    <div>
      <img class="rounded-3" src="path-to-image" alt="Image"/>
    </div>
    <div>
      <img class="rounded-3" src="path-to-image" alt="Image"/>
    </div>
  </div>
</div>

// Vertical carousel + Arrows visible on hover
.tns-carousel-wrapper.tns-nav-inside.tns-nav-light.tns-controls-inside.tns-controls-onhover
  .tns-carousel-inner(data-carousel-options = '{"axis": "vertical", "gutter": 15}')
    div
      img(src="path-to-image", alt="Image").rounded-3
    div
      img(src="path-to-image", alt="Image").rounded-3
    div
      img(src="path-to-image", alt="Image").rounded-3

Responsive carousel with multiple items

<!-- Responsive carousel with multiple items -->
<div class="tns-carousel-wrapper">
  <div class="tns-carousel-inner" data-carousel-options='{"items": 3, "controls": false, "responsive": {"0":{"items":1, "gutter": 16},"500":{"items":2, "gutter": 16},"768":{"items":3, "gutter": 16}, "1100":{"gutter": 24}}}'>
    <div>
      <img class="rounded" src="path-to-image" alt="Image"/>
    </div>
    <div>
      <img class="rounded" src="path-to-image" alt="Image"/>
    </div>
    <div>
      <img class="rounded" src="path-to-image" alt="Image"/>
    </div>
  </div>
</div>

// Responsive carousel with multiple items
.tns-carousel-wrapper
  .tns-carousel-inner(data-carousel-options = '{"items": 3, "controls": false, "responsive": {"0":{"items":1, "gutter": 16},"500":{"items":2, "gutter": 16},"768":{"items":3, "gutter": 16}, "1100":{"gutter": 24}}}')
    div
      img(src="path-to-image", alt="Image").rounded
    div
      img(src="path-to-image", alt="Image").rounded
    div
      img(src="path-to-image", alt="Image").rounded

Default Bootstrap carousel

<!-- Default Bootstrap carousel -->
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
  <ol class="carousel-indicators">
    <li data-bs-target="#carouselExample" data-bs-slide-to="0" class="active"></li>
    <li data-bs-target="#carouselExample" data-bs-slide-to="1"></li>
    <li data-bs-target="#carouselExample" data-bs-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="path-to-image" alt="Image">
    </div>
    <div class="carousel-item">
      <img src="path-to-image" alt="Image">
    </div>
    <div class="carousel-item">
      <img src="path-to-image" alt="Image">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExample" role="button" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExample" role="button" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </a>
</div>

// Default Bootstrap carousel
#carouselExample.carousel.slide(data-bs-ride="carousel")
  ol.carousel-indicators
    li(data-bs-target="#carouselExample", data-bs-slide-to="0").active
    li(data-bs-target="#carouselExample", data-bs-slide-to="1")
    li(data-bs-target="#carouselExample", data-bs-slide-to="2")
  .carousel-inner
    .carousel-item.active
      +image("path-to-image", "Image")
    .carousel-item
      +image("path-to-image", "Image")
    .carousel-item
      +image("path-to-image", "Image")
  a(href="#carouselExample", role="button", data-bs-slide="prev").carousel-control-prev
    span(aria-hidden="true").carousel-control-prev-icon
    span.visually-hidden Previous
  a(href="#carouselExample", role="button", data-bs-slide="next").carousel-control-next
    span(aria-hidden="true").carousel-control-next-icon
    span.visually-hidden Next

Content

Components

Utilities

Carousel

Basic HTML structure:

Modifier classes:

Data API:

Layer animation classes:

All controls: Dots + Arrows + Progress

Controls position: Dots outside + Arrows inside

Fade transition + Layer animations

From top to bottom

From left to right

From top to bottom

From left to right

Vertical carousel + Arrows visible on hover

Responsive carousel with multiple items

Default Bootstrap carousel