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

Cartzilla component

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

Basic HTML structure:
<div class="tns-carousel tns-nav-enabled">
  <div class="tns-carousel-inner" data-carousel-options='{}'>
    <!-- Carousel slides here -->
Modifier classes:
  • tns-nav-enabled - Helper class to align absolute positioned controls (prev/next) when nav (dots) are enabled.
  • tns-controls-lg - Large controls (prev/next buttons).
  • tns-controls-sm - Small controls (prev/next buttons).
  • tns-controls-static - Controls (prev/next buttons) are always visible.
  • tns-controls-outside - Controls (prev/next buttons) are placed outside of carousel content.
  • tns-nav-start - Left aligned dots (center by default).
  • tns-nav-end - Right aligned dots (center by default).
  • 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 visit