Image Carousel

A slideshow component for cycling through images. Enable/disable rotation with the data-auto-rotate attribute.

Code Example Shortcut: z-image-carousel

<div class="slider" data-auto-rotate="true">
    <div class="slides-container">
        <div class="slide"><img src="your-image.jpg"></div>
        <div class="slide"><img src="your-image-2.jpg"></div>
        ...
    </div>
    <div class="prev arrow theme-dark"><i class="zenicon-arrow-back-ios up-1 left-1"></i></div>
    <div class="next arrow theme-dark"><i class="zenicon-arrow-forward-ios up-1 right-1"></i></div>    
</div>

The Zen Test

Every component, section, and utility we ship will pass layout, color, and functional tests to ensure they perform flawlessly in today's modern browsers.

So you can be assured it "just works". Try it out below.