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

• Simple
• Multiple
• Responsive
• Centered
• Gutter space between slides
• Slide titles as navigation
• Autoplay
• Finite
• Vertical layout
• Right to Left
• Fade animation
• Slide-deck animation
• Synced carouzels
• Easing
• Events & Methods
• Hash navigation
• Through data-attribute
• Video

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