Carouhell - manual rotation

Back to Carouhell

Carouhell provides data-load attribute, which can contain any valid JS code that executes after the carouhell and all its extensions (if any) loads. If you don't provide the attribute, it defaults to this.play(), which autoplays the carouhell.

Basic carouhell also provides the left() method which rotates one frame from right to left. Both methods can be called outside of carouhell scope (without using this on carouhell's attributes), see the buttons below.

Alas, there is no pause method, but the timer is exposed in t attribute, which you can clear by yourself, see the onmouseover, which pauses autoplay rotation on mouse hovering above the carousel (similarly, you could also attach the timer clearing to touch event or use general pointer events).

To change the rotation speed, set the data-stay attribute, then pause, then play again. This is non-intuitive, but I reached my limits what can I stuff into the 666 bytes long code. If you need more comfortable way to handle your carouhell, use the buttons extension, which adds more features in another 666 bytes, pause method and play method reacting on attribute changes among them.

<link rel="stylesheet" type="text/css" href="src/carouhell.css"> <script src="src/carouhell.js"></script> <style> .carouhell { width: 400px; height: 400px; background: gray; } .carouhell li { transition: 400ms; } </style> <button onclick="test.left()">Rotate one</button> <button onclick="test.play()">Play</button> <br><br> <ul id="test" class="carouhell" data-load="false" onmouseover="clearInterval(this.t)"> <li><img src="assets/img1.jpg"> <li><img src="assets/img2.jpg"> <li><img src="assets/img3.jpg"> </ul>