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

Createx component

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