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.
<![CDATA[
<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 b.active::before { 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>
]]>