Fully Responsive Carousel In Vanilla JS – Carouseria

Preview:

Description:

Carouseria is a pure JS library that lets you create a fully-responsive, any-content carousel with fade in/out and horizontal/vertical scrolling effects.

How to use it:

Load the minified version of the Carouseria library in the document.

<link rel="stylesheet" href="/carouseria.min.css">
<script src="/carouseria.min.js"></script>

The HTML structure for the carousel.

<div id="carouseria">
  <div class="carouseria-item">
    <div class="item-style">
      <h2>Slide 1</h2>
    </div>
  </div>
  <div class="carouseria-item">
    <div class="item-style">
      <h2>Slide 2</h2>
    </div>
  </div>
  <div class="carouseria-item">
    <div class="item-style">
      <h2>Slide 3</h2>
    </div>
  </div>
  ... more slides here ...
</div>

Initialize the carousel with the following parameters:

• [size]: Carousel height (in px, in or vh)
• [loop]: Infinite loop, true or false.
• [direction]: Vertical or horizontal.
• [autoplay | millisecs]: Autoplay and interval.
• [index | orientation]: Visual index and orientation.
• [nav | orientation]: Navigation buttons and orientation

setCarousel("[size] [loop] [direction] [autoplay|millisecs] [index|orientation] [nav|orientation]");

API methods to control the carousel programmatically.

• next (): Transitions the carousel to the next item.
• prev (): Transitions the carousel to the previous item;
• show (item, reverse): Displays a specified item using normal or inverted animation.
• hide (item, reverse): Hides a specified item using normal or inverted animation.
• changeFocus (item, reverse): Changes the focus of the current item to the item passed as a parameter.
• refreshFocus (Reverse): Updates the item that is currently in focus, allowing you to choose between normal or inverted animation.