Carouhell - Tiles

Back to Carouhell

The default styles center the images to fit the carousel contents, unless you set class cover somewhere to center, crop and cover all the related area. The images can be set as background or image elements, possibly nested in other elements. You can also nest list: the items distribute evenly into the free space. The free space is split horizontally unless you set class column to the nested list element (class row can override back in nested element). Finally, you can include text wrapped in element with class stripe to produce semitransparent black badge with white text at the bottom. Feel free to play with the styles: it should be very easy to understand and alter.

<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> <ul class="cover"> <li style="background-image: url('assets/img1.jpg')"><a href="#" class="stripe">Tree one</a> <li> <ul class="column"> <li style="background-image: url('assets/img2.jpg')"> <li style="background-image: url('assets/img3.jpg')"><span class="stripe">Tree three</span> </ul> </ul> <li> <ul class="cover column"> <li style="background-image: url('assets/img1.jpg')"><a href="#" class="stripe">Tree one</a> <li> <ul class="row"> <li style="background-image: url('assets/img2.jpg')"> <li style="background-image: url('assets/img3.jpg')"><span class="stripe">Tree three</span> </ul> </ul> <li style="background-image: url('assets/img2.jpg')"><span class="stripe">Tree two</span> </ul>