Fully Responsive Carousel In Vanilla JS – Carouseria

Category: Javascript , Slider | October 15, 2018
Author: fbarrella
Views Total: 1,099
Official Page: Go to website
Last Update: October 15, 2018
License: MIT

Preview:

Fully Responsive Carousel In Vanilla JS – Carouseria

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.

You Might Be Interested In:


Leave a Reply