Carousel

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

Around component

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
Top