npm install carouzel

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

bash

npm install carouzel





Installation



$3

html

$3

html

  data-carouzel

  id="__carouzel_id"

  aria-roledescription="carousel"

  aria-label="Simple implementation of Carouzel"

>

  

    

      

        

                      data-carouzel-slide

            role="group"

            aria-roledescription="slide"

            aria-label="1 of 6"

          >

            01

          

                      data-carouzel-slide

            role="group"

            aria-roledescription="slide"

            aria-label="2 of 6"

          >

            02

          

                      data-carouzel-slide

            role="group"

            aria-roledescription="slide"

            aria-label="3 of 6"

          >

            03

          

                      data-carouzel-slide

            role="group"

            aria-roledescription="slide"

            aria-label="4 of 6"

          >

            04

          

                      data-carouzel-slide

            role="group"

            aria-roledescription="slide"

            aria-label="5 of 6"

          >

            05

          

                      data-carouzel-slide

            role="group"

            aria-roledescription="slide"

            aria-label="6 of 6"

          >

            06

          

        

      

    

    

      

      

    

  

  

     /

$3

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.

$3

MIT