carouzel
TypeScript icon, indicating that this package has built-in type declarations

1.1.2 • Public • Published

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

Dependencies (0)

    Dev Dependencies (22)

    Package Sidebar

    Install

    npm i carouzel

    Weekly Downloads

    6

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    1.6 MB

    Total Files

    89

    Last publish

    Collaborators

    • adityakahb