Carouzel

Simple

code View on Codesandbox

Multiple slides

code View on Codesandbox

Responsive

Resize the window to see the change in number of displayed slides

code View on Codesandbox

Go to Slide

Hash Navigation

code View on Codesandbox

Through data-attribute

code View on Codesandbox

Video Carouzel

code View on Codesandbox

Lorem ipsum dolor sit amet

Donec metus velit, pellentesque at sollicitudin at, pulvinar ac nunc. Ut feugiat dui nulla, eget sollicitudin nunc sodales vitae.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer id lorem ac tortor malesuada semper. Donec convallis odio faucibus, faucibus justo ac, suscipit dui.

Markup

References

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

HTML

                  
<section
  data-carouzel
  id="__carouzel_id"
  aria-roledescription="carousel"
  aria-label="Carouzel Implementation"
>
  <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);

data-attributes

`carouzel`	Main attribute to be added to the root element
`carouzel-auto`	Attached to the root element along with `data-carouzel`. Takes the settings object as value and initializes the carouzel on window's `DOMContentLoaded` event.
`carouzel-rtl`	Attached programmatically to the root element along with `data-carouzel`, when `isRtl` is true.
`carouzel-centered`	Attached programmatically to the root element along with `data-carouzel`, when `centerBetween` is found to be greater than 0 in carouzel settings.
`carouzel-trackwrapper`	Immediate child of `data-carouzel` root element. Contains the main track, and left/right arrows elements.
`carouzel-trackmask`	Immediate child of `data-carouzel-trackwrapper` element. This acts as mask to hide the inactive/hidden slides on the track.
`carouzel-trackouter`	Immediate child of `data-carouzel-trackmask` element. This gets the calculated width based on the number of active slides to be shown at once.
`carouzel-track`	Immediate child of `data-carouzel-trackouter` element. This is the container which contains all slides as immediate children. This also gets transformed in X axis based on the scroll animation.
`carouzel-slide`	Immediate child of `data-carouzel-track` element. This is the slide element.
`carouzel-title`	Attaches along with `data-carouzel-slide`. Contains encoded HTML markup as value. This can be used to show on respective navigation dot if `useTitlesAsDots` is true and `slidesToShow` is 1.
`carouzel-controlswrapper`	Immediate child of `data-carouzel-trackwrapper`. Contains arrows for left/right navigation.
`carouzel-previousarrow`	Immediate child of `data-carouzel-controlswrapper`. Left arrow button.
`carouzel-nextarrow`	Immediate child of `data-carouzel-controlswrapper`. Right arrow button.
`carouzel-play`	Immediate child of `data-carouzel-controlswrapper`. Play button to control carouzel if `autoplay` is true.
`carouzel-pause`	Immediate child of `data-carouzel-controlswrapper`. Pause button to control carouzel if `autoplay` is true.
`carouzel-pageinfo`	Wrapper elemment for current page count and total page count
`carouzel-currentpage`	Immediate child of `data-carouzel-pageinfo`. Elemment for current page count
`carouzel-totalpages`	Immediate child of `data-carouzel-pageinfo`. Elemment for total page count
`carouzel-navigationwrapper`	Immediate child of `data-carouzel-carouzel`. Contains list of navigation dots.
`carouzel-navigation`	Immediate child of `data-carouzel-navigationwrapper`. Contains navigation dots list items.
`carouzel-dot`	Immediate child of `data-carouzel-navigation`. This element, and the child button element is generated programmatically.
`carouzel-video`	Immediate child of `data-carouzel-slide`. Helps in styling video elements/iframes/embeds.

Options

`activeClass`	string__carouzel-active
The CSS class applied to the shown/active elements in carouzel, such as shown slides and navigation dots.
`afterInitFn`	function
The event which can be fired after the carouzel is initialized. It takes a function as value.
`afterScrollFn`	function
The event which can be fired after the carouzel is animated to next set of slides. It takes a function as value.
`animationEffect`	stringscroll scroll, slide, fade
Type of animation effect.
`animationSpeed`	number500
Animation speed in milliseconds.
`appendUrlHash`	booleanfalse
If `true`, carouzel tries to append the id attribute attached to the first active `data-carouzel-slide` to the window url, after the scroll happens.
`autoplay`	booleanfalse
Toggles the autoplay feature of the carouzel.
`autoplaySpeed`	number5000
Autoplay speed in milliseconds. If autoplay is enabled, the carouzel automatically animates to next set after this number of milliseconds.
`beforeInitFn`	function
The event which can be fired before the carouzel is initialized. It takes a function as value.
`beforeScrollFn`	function
The event which can be fired before the carouzel is animated to next set of slides. It takes a function as value.
`breakpoints`	array
Carouzel is `mobile-first` implementation. The default settings are applied to all breakpoints, but as the following array is populated, the mentioned settings are extended from the default or configured options. [{ `minWidth`: number; The minimum device width at which the following settings need to be updated `centerBetween`: number; `enableTouchSwipe`: boolean; `showArrows`: boolean; `showNavigation`: boolean; `slideGutter`: number; `slidesToScroll`: number; `slidesToShow`: number; `verticalHeight`: number; }]
`centerBetween`	number0
The number of slides which should show up on the left and right of the active slides. This number is divided in half to show up on both slides.
`disabledClass`	string__carouzel-disabled
The CSS class applied to the disabled elements in carouzel, such as left and right arrows when there are no more scrollable slides.
`dotIndexClass`	string__carouzel-pageindex
When the `useTitlesAsDots` is enabled, this CSS class is applied to the page number shown in the navigation dot.
`dotTitleClass`	string__carouzel-pagetitle
When the `useTitlesAsDots` is enabled, this CSS class is applied to the page title shown in the navigation dot.
`duplicateClass`	string__carouzel-duplicate
The CSS class is applied to the duplicate slides element created for infinite scroll implementation.
`easingFunction`	stringlinear linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint
The easing function used for animation effect.
`editModeClass`	string__carouzel-editmode
This class can be used for custom CSS when the carouzel is displayed in certain CMS (like Adobe AEM) edit mode.
`enableKeyboard`	booleantrue
If `false`, keyboard arrow events are not attached to the carouzel.
`enableTouchSwipe`	booleantrue
If `false`, touch swipe events are not attached to the carouzel.
`hiddenClass`	string__carouzel-hidden
This CSS class is used to hide the elements (like navigation or arrows) in certain breakpoint, works along with `showArrows` and `showNavigation`
`idPrefix`	string__carouzel
If the id attribute is not assigned to the root element, this string can be used to generate and assign a random id attribute to the root element.
`isInfinite`	booleantrue
If the id attribute is not assigned to the root element, this string can be used to generate and assign a random id attribute to the root element.
`isRtl`	booleanfalse
If `true`, the right-to-left implementation is enabled.
`isVertical`	booleanfalse
If `true`, the carouzel layout will be changed from horizontal to vertical.
`nextDirectionClass`	string__carouzel-next
This css class is attached to the root element while it is scrolled to the next set of slides.
`pauseOnHover`	booleantrue
If `autoplay` is enabled, it can be paused when cursor is hovered on it. This behavior can be disabled by making this setting `false`.
`previousDirectionClass`	string__carouzel-previous
This css class is attached to the root element while it is scrolled to the previous set of slides.
`showArrows`	booleantrue
If `false`, the arrows are not shown in certain or all breakpoints.
`showNavigation`	booleantrue
If `false`, the navigation dots are not shown in certain or all breakpoints.
`slideGutter`	number0
The gutter space between slides in certain or all breakpoints.
`slidesToScroll`	number1
The number of slides to scroll at once in certain or all breakpoints.
`slidesToShow`	number1
The number of slides to show at once in certain or all breakpoints.
`startAtIndex`	number1
The slide index which should be the first one to show.
`syncWith`	string
The id of the carouzel slider which needs to be synced with. If specified in settings of the both carouzels, both will work in sync.
`touchThreshold`	number125
The distance in pixels between the start and end of the touch/cursor drag.
`trackUrlHash`	booleanfalse
If `true`, the carouzel will try to read the hash parameter from the url and automatically scroll to the respective slide having the hash as its id.
`useTitlesAsDots`	booleanfalse
If `true`, the carouzel will read `data-carouzel-title` attribute and put it as markup in respective navigation dot. It works only when `slidesToShow` is 1.
`verticalHeight`	number480
The height in pixels for the vertical carouzel. This is required for vertical layout implementation.

Methods

`init`	Initializes the instance `__carouzel_instance.init('cssSelector');`
`goToSlide`	`previous``next`number `__carouzel_instance.goToSlide('cssSelector', 'next'); __carouzel_instance.goToSlide('cssSelector', 'previous'); __carouzel_instance.goToSlide('cssSelector', 4);`
`getLength`	Gets the number of carouzel instances on the page `__carouzel_instance.getLength();`
`destroy`	Destroys the instance `__carouzel_instance.destroy('cssSelector');`

Features

Examples

Simple

Multiple slides

Responsive

Centered

Gutter Space

Slide titles as navigation

Autoplay

Finite

Vertical Carouzel

Right To Left

Fading animation

Slide-deck animation

Synced carouzels

Easing

Events & Methods

Hash Navigation

Through data-attribute

Video Carouzel

Lorem ipsum dolor sit amet

Installation

Markup

References

HTML

JavaScript

data-attributes

Options

Methods