Carouhell - fit into viewport width
Back to Carouhell
Carouhell can be tweaked to rotate as many pictures as fits into viewport. Add this CSS:
- display: flex; flex-wrap: wrap; justify-content: space-evenly; to carouhell class
- fixed width to carouhell liitem
- fixed height to both carouhell class and carouhell item
- 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.
<![CDATA[
<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>
]]>