Carouzel is a framework free, light-weight carousel plugin, which is responsive and handles multiple configurations. It uses DOM hardware acceleration for animation effects.
Carouzel is a framework free light-weight carousel plugin, which is responsive, handles multiple configurations. It uses DOM hardware acceleration for animation effects.
https://adityakahb.github.io/carouzel
data-attribute
data-attribute
.npm install carouzel
<link href="../location/carouzel.min.css" rel="stylesheet" />
<script src="../location/carouzel.min.js" type="text/javascript"></script>
<section
data-carouzel
id="__carouzel_id"
aria-roledescription="carousel"
aria-label="Simple implementation of Carouzel"
>
<div data-carouzel-trackwrapper>
<div data-carouzel-trackmask>
<div data-carouzel-trackouter>
<div data-carouzel-track aria-live="polite">
<div
data-carouzel-slide
role="group"
aria-roledescription="slide"
aria-label="1 of 6"
>
01
</div>
<div
data-carouzel-slide
role="group"
aria-roledescription="slide"
aria-label="2 of 6"
>
02
</div>
<div
data-carouzel-slide
role="group"
aria-roledescription="slide"
aria-label="3 of 6"
>
03
</div>
<div
data-carouzel-slide
role="group"
aria-roledescription="slide"
aria-label="4 of 6"
>
04
</div>
<div
data-carouzel-slide
role="group"
aria-roledescription="slide"
aria-label="5 of 6"
>
05
</div>
<div
data-carouzel-slide
role="group"
aria-roledescription="slide"
aria-label="6 of 6"
>
06
</div>
</div>
</div>
</div>
<div data-carouzel-controlswrapper>
<button type="button" data-carouzel-previousarrow aria-label="Previous">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 0 24 24"
width="24px"
fill="#000000"
>
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z" />
</svg>
</button>
<button type="button" data-carouzel-nextarrow aria-label="Next">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 0 24 24"
width="24px"
fill="#000000"
>
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z" />
</svg>
</button>
</div>
</div>
<div data-carouzel-pageinfo>
<em data-carouzel-currentpage></em> /
<em data-carouzel-totalpages></em>
</div>
<div data-carouzel-navigationwrapper>
<ul data-carouzel-navigation></ul>
</div>
</section>
var __carouzel_instance = Carouzel.Root.getInstance();
var __carouzel_options = {};
__carouzel_instance.init('#__carouzel_id', __carouzel_options);
Visit home to know more about options and methods.
MIT