Package Exports

carouzel
carouzel/dist/scripts/carouzel.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (carouzel) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Carouzel

Carouzel is a framework free light-weight carousel plugin, which is responsive, handles multiple configurations. It uses DOM hardware acceleration for animation effects.

Homepage

https://adityakahb.github.io/carouzel

Codesandbox Demoes

Features

Available in Vanilla Javascript and CommonJS module.
Framework-free.
Can be used as ES6 module import OR direct source.
Mobile First and fully responsive.
With bare minimum css (scss source included)
Compiled through Typescript.
Can have multiple instances with multiple configurations.
Styled through SASS - Source included for customization.
Has 13 easing options to go with scroll, slide and fade effects.
Can be navigated through keyboard arrows.
Can be initiated manually or via data-attribute.
Uses requestAnimationFrame for animation.
Object.assign polyfill is added by Typescript! No other polyfills required.

NPM

npm install carouzel

Installation

References

<link href="../location/carouzel.min.css" rel="stylesheet" />
<script src="../location/carouzel.min.js" type="text/javascript"></script>

Markup

<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>

JavaScript

var __carouzel_instance = Carouzel.Root.getInstance();
var __carouzel_options = {};
__carouzel_instance.init('#__carouzel_id', __carouzel_options);

Options & Methods

Visit home to know more about options and methods.

License

MIT