Carousel

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="cz-carousel cz-dots-enabled">
  <div class="cz-carousel-inner" data-carousel-options='{}'>
    <!-- Carousel slides here -->
  </div>
</div>

Modifier classes:

cz-dots-enabled - Helper class to align absolute positioned controls (prev/next) when nav (dots) are enabled.
cz-controls-lg - Large controls (prev/next buttons).
cz-controls-sm - Small controls (prev/next buttons).
cz-controls-static - Controls (prev/next buttons) are always visible.
cz-controls-outside - Controls (prev/next buttons) are placed outside of carousel content.
cz-dots-inside - Position dots absolutely on top of the carousel content.
cz-dots-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

One item + Dots + Loop (defaults)

<!-- One item + Dots + Loop (defaults) -->
<div class="cz-carousel cz-dots-enabled">
  <div class="cz-carousel-inner">
    <img src="path-to-image" alt="...">
    <img src="path-to-image" alt="...">
    <img src="path-to-image" alt="...">
  </div>
</div>

// One item + Dots + Loop (defaults)
.cz-carousel.cz-dots-enabled
  .cz-carousel-inner
    +image("path-to-image", "Alt text")
    +image("path-to-image", "Alt text")
    +image("path-to-image", "Alt text")

One item + Static controls + Dots inside + No loop

<!-- One item + Static controls + Dots inside + No loop -->
<div class="cz-carousel cz-controls-static cz-dots-enabled cz-dots-light cz-dots-inside">
  <div class="cz-carousel-inner" data-carousel-options='{"loop": false}'>
    <img src="path-to-image" alt="...">
    <img src="path-to-image" alt="...">
    <img src="path-to-image" alt="...">
  </div>
</div>

// One item + Static controls + Dots inside + No loop
.cz-carousel.cz-controls-static.cz-dots-enabled.cz-dots-light.cz-dots-inside
  .cz-carousel-inner(data-carousel-options='{"loop": false}')
    +image("path-to-image", "Alt text")
    +image("path-to-image", "Alt text")
    +image("path-to-image", "Alt text")

Vertical carousel + No dots

<!-- Vertical carousel + Loop + No dots -->
<div class="cz-carousel">
  <div class="cz-carousel-inner" data-carousel-options='{"axis": "vertical", "nav": false}'>
    <img src="path-to-image" alt="...">
    <img src="path-to-image" alt="...">
    <img src="path-to-image" alt="...">
  </div>
</div>

// Vertical carousel + Loop + No dots
.cz-carousel
  .cz-carousel-inner(data-carousel-options='{"axis": "vertical", "nav": false}')
    +image("path-to-image", "Alt text")
    +image("path-to-image", "Alt text")
    +image("path-to-image", "Alt text")

Multiple items + Static controls outside + No dots + Loop (Responsive)

<!-- Multiple items + Static controls outside + No dots + Loop (Responsive) -->
<div class="cz-carousel cz-controls-static cz-controls-outside">
  <div class="cz-carousel-inner" data-carousel-options='{"items": 3, "nav": false, "responsive": {"0":{"items":1},"500":{"items":2, "gutter": 18},"768":{"items":3, "gutter": 20}, "1100":{"gutter": 24}}}'>
    <img src="path-to-image" alt="...">
    <img src="path-to-image" alt="...">
    <img src="path-to-image" alt="...">
    <img src="path-to-image" alt="...">
  </div>
</div>

// Multiple items + Static controls outside + No dots + Loop (Responsive)
.cz-carousel.cz-controls-static.cz-controls-outside
  .cz-carousel-inner(data-carousel-options='{"items": 3, "nav": false, "responsive": {"0":{"items":1},"500":{"items":2, "gutter": 18},"768":{"items":3, "gutter": 20}, "1100":{"gutter": 24}}}')
    +image("path-to-image", "Alt text")
    +image("path-to-image", "Alt text")
    +image("path-to-image", "Alt text")
    +image("path-to-image", "Alt text")

One item + Fade transition + Dots + Loop

<!-- One item + Fade transition + Dots + Loop -->
<div class="cz-carousel cz-dots-enabled">
  <div class="cz-carousel-inner data-carousel-options='{"mode": "gallery", "speed": 1000}'">
    <img src="path-to-image" alt="...">
    <img src="path-to-image" alt="...">
    <img src="path-to-image" alt="...">
  </div>
</div>

// One item + Fade transition + Dots + Loop
.cz-carousel.cz-dots-enabled
  .cz-carousel-inner(data-carousel-options='{"mode": "gallery", "speed": 1000}')
    +image("path-to-image", "Alt text")
    +image("path-to-image", "Alt text")
    +image("path-to-image", "Alt text")