Carouhell - Basic use

Back to Carouhell

To create a carousell from list, add a class carouhell to it. List items can contain any reasonable element (mostly images and links). The carousel below should rotate indefinitely from right to left with a period of 3000ms specified in the data-stay attribute (can be omitted, the default is 4000). The client code below sets the carousel size (400x400) and the transition duration (400ms) in the style.

To make this stuff working, just add the carouhell.css (666 B) and the carouhell.js (666 B). No other dependencies, this ain't a bloatware: the code snippet below is roughly the same size as the styles and javascript combined.

<link rel="stylesheet" type="text/css" href="src/carouhell.css"> <script src="src/carouhell.js"></script> <style> .carouhell { width: 400px; height: 400px; background: gray; } .carouhell li { transition: 400ms; } </style> <ul class="carouhell" data-stay="3000"> <li><a href="#"><img src="assets/img1.jpg"></a> <li style="background-image: url('assets/img2.jpg')"> <li><img src="assets/img3.jpg"> </ul>