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.

<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>