Carousel (Slider)

A slideshow component for cycling through elements (images or slides with any content) like a carousel.

Finder component

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

Basic HTML structure:
<div class="tns-carousel-wrapper tns-nav-enabled">
  <div class="tns-carousel-inner" data-carousel-options='{}'>
    <!-- Carousel slides here -->
Modifier classes:
  • tns-controls-static - Controls (prev/next buttons) are always visible.
  • tns-controls-outside - Always place controls (prev/next buttons) outside of carousel content.
  • tns-controls-outside-sm/-md/-lg/-xl/-xxl - Responsive placement. Controls (prev/next buttons) are placed outside of carousel content on sm/md/lg/xl/xxl screen size and up.
  • tns-nav-outside - Position nav (dots) outside of the carousel content.
  • tns-nav-outside-flush - Removes top/bottom spacing from nav (dots) outside of the carousel content.
  • tns-carousel-light - Switch controls (prev/next buttons) and nav (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.
  • "navAsThumbnails": true/false - Indicate if the nav (dots) are thumbnails. Set to true if you want to replace dots with thumbnails.
  • "navContainer": string - The container element/selector around the dots. navContainer must have at least same number of children as the slides. Use this option to link your carousel to thumbnails tns-thumbnails
  • "controlsContainer": string - The container element/selector around the prev/next buttons. controlsContainer must have at least 2 child elements. Use this option to link your carousel to external controls tns-carousel-controls
  • "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