Carouhell Stripe - stripe rotation

Back to Carouhell

Requirements: stripe extension

To rotate the stripe, use sRotate(d) method, where negative d means rotating left and positive right. To rotate right, you will also need the buttons extension. If you need some custom tt after the stripe rotation, you can define shift stripe method, which fires after rotation.

<link rel="stylesheet" type="text/css" href="src/carouhell.css"> <script src="src/carouhell-with-stripe.js"></script> <style> .carouhell { width: 400px; height: 400px; background: gray; } .carouhell li { transition: 400ms; } #stripe1 { width: 400px; height: 130px; padding: .2em 0; background: gray; } #stripe1 { display: flex; justify-content: center; align-items: center; } #stripe1 b { width: 100px; height: 100px; margin: 0 .2em; border-radius: .2em; background: center/cover; opacity: 0.5; transition: 400ms; } #stripe1 b:nth-child(2) { opacity: 1; } #stripe1 { width: 120px; height: 120px; } </style> <button onclick="test.left();test.sRotate(-1)">Rotate left</button> <br><br> <ul id="test" class="carouhell" data-load="this.shiftTo(1)" data-stripe="stripe1"> <li><img src="assets/img1.jpg"> <li><img src="assets/img2.jpg"> <li><img src="assets/img3.jpg"> </ul> <div id="stripe1"></div> <script> test.sItem = L => { var b = document.createElement("b"); = `url(${L.children[0].src})`; b.onclick = _=>test.shiftTo(L.i); return b; } stripe1.shift = _ => { stripe1.children[0].classList.remove("active"); stripe1.children[1].classList.add("active"); } </script>