Carouhell - fit into viewport width

Back to Carouhell

Carouhell can be tweaked to rotate as many pictures as fits into viewport. Add this CSS:

  1. display: flex; flex-wrap: wrap; justify-content: space-evenly; to carouhell class
  2. fixed width to carouhell liitem
  3. fixed height to both carouhell class and carouhell item
  4. set the transition duration low as the animation is jerky in slow shift

Try to play with viewport width in the example below. The contents adjusts to fill 100% width.

<link rel="stylesheet" type="text/css" href="src/carouhell.css"> <script src="src/carouhell.js"></script> <style> .carouhell { height: 300px; margin: 0 auto; background: gray; } .carouhell { display: flex; flex-wrap: wrap; justify-content: space-evenly; } .carouhell li { width: 300px; height: 300px; transition: 200ms; } </style> <ul id="test" class="carouhell" data-stay="2000"> <li><img src="assets/img1.jpg"> <li><img src="assets/img1.jpg"> <li><img src="assets/img3.jpg"> <li><img src="assets/img3.jpg"> <li><img src="assets/img2.jpg"> <li><img src="assets/img2.jpg"> </ul>