Author: | fbarrella |
---|---|
Views Total: | 2,784 views |
Official Page: | Go to website |
Last Update: | October 15, 2018 |
License: | MIT |
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.