Carouhell Buttons - Rotation direction
Back to Carouhell
Requirements: button extension
Buttons extension introduces data-dir attribute to define the rotation direction:
- negative number to rotate leftwards (default)
- zero to stay
- positive number to rotate rightwards
<![CDATA[
<link rel="stylesheet" type="text/css" href="src/carouhell.css">
<script src="src/carouhell-with-buttons.js"></script>
<style>
.carouhell { height: 400px; margin: 0 auto; background: gray; }
.carouhell { display: flex; flex-wrap: wrap; justify-content: space-evenly; }
.carouhell li { width: 400px; height: 400px; transition: 200ms; }
</style>
<button onclick="test.dataset.dir=-1">Leftwards</button>
<button onclick="test.dataset.dir=0">Stay</button>
<button onclick="test.dataset.dir=+1">Rightwards</button>
<br><br>
<ul id="test" class="carouhell" data-stay="3000" data-dir="-1">
<li><img src="assets/img1.jpg">
<li><img src="assets/img1.jpg">
<li><img src="assets/img2.jpg">
<li><img src="assets/img2.jpg">
<li><img src="assets/img3.jpg">
<li><img src="assets/img3.jpg">
</ul>
]]>