Author: | jonchretien |
---|---|
Views Total: | 5,111 views |
Official Page: | Go to website |
Last Update: | October 24, 2020 |
License: | MIT |
Preview:

Description:
Timed infinite carousel that uses vanilla JavaScript & CSS animations. It supports both horizontal and vertical scrolling. It’s useful if you need a UI element to continuously scroll (ex: ticker being displayed on a TV monitor).
How to use it:
Import the infinite-carousel.js in the document.
<script src="dist/infinite-carousel.js"></script>
Add slide items into the carousel.
<div class="infinite-carousel-shell"> <div id="container" class="infinite-carousel-group infinite-carousel-horizontal"> <div class="infinite-carousel-group-item">1</div> <div class="infinite-carousel-group-item">2</div> <div class="infinite-carousel-group-item">3</div> <div class="infinite-carousel-group-item">4</div> <div class="infinite-carousel-group-item">5</div> <div class="infinite-carousel-group-item">6</div> <div class="infinite-carousel-group-item">7</div> <div class="infinite-carousel-group-item">8</div> <div class="infinite-carousel-group-item">9</div> <div class="infinite-carousel-group-item">10</div> <div class="infinite-carousel-group-item">11</div> </div> </div>
Initialize the carousel.
var infinitecarousel = new InfiniteCarousel('#container', 'horizontal', 8);
Parameters.
/** * Required arguments are: * - a container element (string) * - a direction ('horizontal' or 'vertical') * - the number of items that are visible at once */ var infinitecarousel = new InfiniteCarousel('#container', 'horizontal', 3, { // optional options object (defaults are listed) timerDuration: 2000, // set time between advances in milliseconds transitionDuration: '1s' // the duration of the animation });
Changelog:
v0.2.1 (10/24/2020)
- refactor
Is it possible to configure this to respond to directional arrows rather than a timed scroll?
After the 8th slide, there’s nothing in latest firefox. This is not infinite.
this is slightly flawed but nontheless a great one for a lesson :D