Carouhell Buttons - attributes driven playing
Back to Carouhell
Requirements: button extension
Buttons extension fixes the play() method to check the data-dir attribute (see previous example) and the data-stay attribute (see below). The core code requires the play() to stop before changing speed, no such limitation here. This extension also brings methods right() and pause(), see next example.
<![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; }
</style>
Autoplay speed and direction:
<input type="number" min="-10" max="10" value="0" onchange="setSpeed(this.value)">
<br><br>
<script>
function setSpeed(value) {
test.dataset.dir = Math.sign(value);
test.dataset.stay = 6e3 / (1 + Math.abs(value));
}
</script>
<ul id="test" class="carouhell" data-dir="0">
<li><img src="assets/img1.jpg">
<li><img src="assets/img2.jpg">
<li><img src="assets/img3.jpg">
</ul>
]]>