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.
<![CDATA[
<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"><</button>
<ul class="carouhell" data-left="B1left" data-right="B1right" onmouseover="this.pause()" onmouseout="this.play()">
<li><img src="assets/img1.jpg">
<li><img src="assets/img2.jpg">
<li><img src="assets/img3.jpg">
</ul>
<button id="B1right">></button>
</div>
]]>