Carouhell Stripe - create stripe

Back to Carouhell

Requirements: stripe extension

The simplest use of stripe extension is to define data-stripe attribute containing ID of element where the stripe contents is generated and updated. By default, there is an empty <b> element for every frame in the carouhell and <b> at the position of currently active frame receives a class active.

<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; display: flex; justify-content: center; background: gray; } #stripe1 b::before { font-size: 2em; margin: 0 .5em; content: '•'; } #stripe1 { color: white; } </style> <ul class="carouhell" data-stay="1000" 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>