Carousel

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

Createx component

Make sure to link to Tiny Slider css and js files in your document: assets/vendor/tiny-slider/dist/tiny-slider.css and assets/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">
  <div class="tns-carousel-inner" data-carousel-options='{}'>
    <!-- Carousel slides here -->
  </div>
</div>

Modifier classes:

tns-controls-outside - Position controls (prev/next buttons) arranged around the edges outside of the carousel content. Will not work with the above positioning classes.
tns-controls-onhover - Show controls (prev/next buttons) only when user hovers over the carousel.
tns-controls-inverse - Switch controls (prev/next buttons) skin colors.
tns-nav-outside - Position nav (dots) absolutely outside on bottom of the carousel content.
tns-nav-inverse - Switch nav (dots) skin colors.

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.
"controlsContainer" - The container element/selector around the prev/next buttons. Must have at least 2 child elements.
"navContainer" - The container element/selector around the dots. Must have at least same number of children as the slides.
"navAsThumbnails" - Indicate if the dots are thumbnails. If true, they will always be visible even when more than 1 slides displayed in the viewport.
For more options please visithttps://github.com/ganlanyuan/tiny-slider#options

Layer animation classes:

from-top
from-bottom
from-start
from-end
scale-up
scale-down
fade-in
delay-1
delay-2
delay-3
delay-4

Default: Nav (dots) inside + controls (prev/next) inside

Result
HTML

<!-- All controls inside: Dots + Arrows -->
<div class="tns-carousel-wrapper">
  <div class="tns-carousel-inner" data-carousel-options='{
    "gutter": 15,
    "loop": false
  }'>

    <!-- Carousel item -->
    <div><img src="path-to-image" alt="Slider image"></div>

    <!-- Carousel item -->
    <div><img src="path-to-image" alt="Slider image"></div>

    <!-- Carousel item -->
    <div><img src="path-to-image" alt="Slider image"></div>
  </div>
</div>

Nav (dots) outside + Controls (prev/next) outside + Infinite

Result
HTML

<!-- All controls outside: Dots + Arrows -->
<div class="tns-carousel-wrapper tns-controls-outside tns-nav-outside">
  <div class="tns-carousel-inner" data-carousel-options='{
    "gutter": 15
  }'>

    <!-- Carousel item -->
    <div><img src="path-to-image" alt="Slider image"></div>

    <!-- Carousel item -->
    <div><img src="path-to-image" alt="Slider image"></div>

    <!-- Carousel item -->
    <div><img src="path-to-image" alt="Slider image"></div>
  </div>
</div>

<!-- Custom controls outside carousel: Top -->
<div class="tns-custom-controls tns-controls-inverse mb-3" id="tns-custom-controls-1" tabindex="0">
  <button type="button" data-controls="prev" tabindex="-1">
    <i class="ci-arrow-left"></i>
  </button>
  <button type="button" data-controls="next" tabindex="-1">
    <i class="ci-arrow-right"></i>
  </button>
</div>
<div class="tns-carousel-wrapper">
  <div class="tns-carousel-inner" data-carousel-options='{
    "gutter": 15,
    "nav": false,
    "controlsContainer": "#tns-custom-controls-1"
  }'>
    <!-- Carousel item... -->
    <div><img src="path-to-image" alt="Slider image"></div>
  </div>
</div>

<!-- Custom controls outside carousel: Bottom -->
<div class="tns-carousel-wrapper">
  <div class="tns-carousel-inner" data-carousel-options='{
    "gutter": 15,
    "nav": false,
    "controlsContainer": "#tns-custom-controls-1"
  }'>
    <!-- Carousel item... -->
    <div><img src="path-to-image" alt="Slider image"></div>
  </div>
</div>
<div class="tns-custom-controls tns-controls-inverse mt-3" id="tns-custom-controls-2" tabindex="0">
  <button type="button" data-controls="prev" tabindex="-1">
    <i class="ci-arrow-left"></i>
  </button>
  <button type="button" data-controls="next" tabindex="-1">
    <i class="ci-arrow-right"></i>
  </button>
</div>

Fade transition + Layer animation

Result
HTML

From top to bottom

From bottom to top

From left to right

From right to left

<!-- Fade transition + Layer animation -->
<div class="tns-carousel-wrapper">
  <div class="tns-carousel-inner" data-carousel-options='{
    "mode": "gallery",
    "nav": false
  }'>

    <!-- Carousel item -->
    <div class="py-5 bg-faded-primary">
      <div class="py-5 px-3 text-center">
        <h3 class="mb-2 from-top">From top to bottom</h3>
        <p class="mb-4 pb-3 fs-lg from-bottom">From bottom to top</p>
        <button class="btn btn-primary scale-down delay-2" type="button">Scale down</button>
      </div>
    </div>

    <!-- Carousel item -->
    <div class="py-5 bg-faded-success">
      <div class="py-5 px-3 text-center">
        <h3 class="mb-2 from-start">From left to right</h3>
        <p class="mb-4 pb-3 fs-lg 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>

Vertical slider + Controls visible on hover

Result
HTML

<!-- Vertical slider + Controls visible on hover -->
<div class="tns-carousel-wrapper tns-controls-onhover">
  <div class="tns-carousel-inner" data-carousel-options='{
    "axis": "vertical"
  }'>

    <!-- Carousel item -->
    <div><img src="path-to-image" alt="Slider image"></div>
    <!-- Carousel item -->
    <div><img src="path-to-image" alt="Slider image"></div>
    <!-- Carousel item -->
    <div><img src="path-to-image" alt="Slider image"></div>
  </div>
</div>

Responsive carousel with multiple items

Result
HTML

<!-- Responsive carousel with multiple items -->
<div class="tns-carousel-wrapper tns-controls-outside tns-nav-outside">
  <div class="tns-carousel-inner" data-carousel-options='{
    "items": 4,
    "responsive": {
      "0": {
        "items":1,
        "gutter": 16
      },
      "500": {
        "items":2,
        "gutter": 18
      },
      "768": {
        "items":3,
        "gutter": 18
      },
      "1100": {
        "gutter": 24
      }
    }
  }'>

    <!-- Carousel item -->
    <div><img src="path-to-image" alt="Slider image"></div>
    <!-- Carousel item -->
    <div><img src="path-to-image" alt="Slider image"></div>
    <!-- Carousel item -->
    <div><img src="path-to-image" alt="Slider image"></div>
    <!-- Carousel item -->
    <div><img src="path-to-image" alt="Slider image"></div>
  </div>
</div>

Nav option: Pager

Result
HTML

<!-- Nav option: Pager -->
<div class="tns-carousel-wrapper">
  <div class="tns-carousel-inner" data-carousel-options='{
    "gutter": 15,
    "navContainer": "#tns-pager"
  }'>

    <!-- Carousel item -->
    <div><img src="path-to-image" alt="Slider image"></div>

    <!-- Carousel item -->
    <div><img src="path-to-image" alt="Slider image"></div>
  </div>

  <!-- Pager -->
  <div class="tns-pager px-sm-5 pb-sm-5 px-3 pb-3" id="tns-pager">
    <button type="button" data-nav="0">01</button>
    <button type="button" data-nav="1">02</button>
  </div>
</div>

Nav option: Thumbnails

Result
HTML

<!-- Nav option: Thumbnails -->
<div class="tns-carousel-wrapper">
  <div class="tns-carousel-inner" data-carousel-options='{
    "gutter": 15,
    "loop": false,
    "navContainer": "#tns-thumbnails",
    "navAsThumbnails": true
  }'>

    <!-- Carousel item -->
    <div><img src="path-to-image" alt="Slider image"></div>

    <!-- Carousel item -->
    <div><img src="path-to-image" alt="Slider image"></div>
  </div>

  <!-- Thumbnails -->
  <div class="tns-thumbnails" id="tns-thumbnails">

    <!-- Thumbnail item -->
    <button type="button" data-nav="0">
      <img src="path-to-thumbnail-image" alt="Thumbnail">
    </button>

    <!-- Thumbnail item -->
    <button type="button" data-nav="1">
      <img src="path-to-thumbnail-image" alt="Thumbnail">
    </button>
  </div>
</div>

Default Bootstrap carousel

Result
HTML

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