Carouhell Buttons - buttons without scripting

Back to Carouhell

Requirements: button extension

Attributes data-left and data-right can contain ID of elements which, if clicked, turns the carouhell leftwards and rightwards respectively. It is equivalent of calling left() or right() and then pause().

Similarly, you can also make click handler to pause() method by data-pause attribute and play() by data-play.

<link rel="stylesheet" type="text/css" href="src/carouhell.css"> <script src="src/carouhell-with-buttons.js"></script> <style> .carouhell { width: 400px; height: 400px; background: gray; } .carouhell li { transition: 400ms; } .wrapper { display: flex; justify-content: center; align-items: center; } button { margin: 1em; padding: .5em; } </style> <div class="wrapper"> <button id="B1left">&lt;</button> <ul class="carouhell" data-left="B1left" data-right="B1right" onmouseover="this.pause()" onmouseout=""> <li><img src="assets/img1.jpg"> <li><img src="assets/img2.jpg"> <li><img src="assets/img3.jpg"> </ul> <button id="B1right">&gt;</button> </div>