GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → jonchretien → Infinite Carousel

jonchretien / Infinite Carousel

Licence: mit
A timed infinite carousel that uses vanilla JavaScript & CSS animations.

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

cssvanilla-javascriptcss-animations

Projects that are alternatives of or similar to Infinite Carousel

Josh.js
A JavaScript library to animate content on page scroll.
Stars: ✭ 345 (+3733.33%)
Mutual labels:  vanilla-javascript, css-animations
Vanilla Lazyload
LazyLoad is a lightweight, flexible script that speeds up your website by deferring the loading of your below-the-fold images, backgrounds, videos, iframes and scripts to when they will enter the viewport. Written in plain "vanilla" JavaScript, it leverages IntersectionObserver, supports responsive images and enables native lazy loading.
Stars: ✭ 6,596 (+73188.89%)
Mutual labels:  vanilla-javascript
Lightgallery
A customizable, modular, responsive, lightbox gallery plugin.
Stars: ✭ 4,829 (+53555.56%)
Mutual labels:  css-animations
Darken
🌑 Dark mode made easy
Stars: ✭ 571 (+6244.44%)
Mutual labels:  vanilla-javascript
Bunny
BunnyJS - Lightweight native (vanilla) JavaScript (JS) and ECMAScript 6 (ES6) browser library, package of small stand-alone components without dependencies: FormData, upload, image preview, HTML5 validation, Autocomplete, Dropdown, Calendar, Datepicker, Ajax, Datatable, Pagination, URL, Template engine, Element positioning, smooth scrolling, routing, inversion of control and more. Simple syntax and architecture. Next generation jQuery and front-end framework. Documentation and examples available.
Stars: ✭ 473 (+5155.56%)
Mutual labels:  vanilla-javascript
Sticky Js
Library for sticky elements written in vanilla javascript
Stars: ✭ 618 (+6766.67%)
Mutual labels:  vanilla-javascript
Morphext
A simple, high-performance and cross-browser jQuery rotating / carousel plugin for text phrases powered by Animate.css.
Stars: ✭ 384 (+4166.67%)
Mutual labels:  css-animations
Awesome Web Animation
A list of awesome web animation libraries, books, apps etc.
Stars: ✭ 904 (+9944.44%)
Mutual labels:  css-animations
Radiobox.css
🔘 Tiny set of pure CSS animations for your radio inputs. https://720kb.github.io/radiobox.css/
Stars: ✭ 699 (+7666.67%)
Mutual labels:  css-animations
Lightgallery.js
Full featured JavaScript image & video gallery. No dependencies
Stars: ✭ 5,168 (+57322.22%)
Mutual labels:  css-animations
Slim Select
Slim advanced select dropdown
Stars: ✭ 517 (+5644.44%)
Mutual labels:  vanilla-javascript
Checkbox.css
☑️ Tiny set of pure CSS animations for your checkbox input. https://720kb.github.io/checkbox.css/
Stars: ✭ 478 (+5211.11%)
Mutual labels:  css-animations
Inputmask
Input Mask plugin
Stars: ✭ 5,695 (+63177.78%)
Mutual labels:  vanilla-javascript
Tuesday
A quirky CSS Animation Library by Shakr
Stars: ✭ 446 (+4855.56%)
Mutual labels:  css-animations
Splide
Splide is a lightweight, powerful and flexible slider and carousel, written in pure JavaScript without any dependencies.
Stars: ✭ 786 (+8633.33%)
Mutual labels:  vanilla-javascript
Adminkit
🧰 AdminKit is a free & open source Bootstrap 5 Admin Template
Stars: ✭ 395 (+4288.89%)
Mutual labels:  vanilla-javascript
Motus
Animation library that mimics CSS keyframes when scrolling.
Stars: ✭ 502 (+5477.78%)
Mutual labels:  css-animations
Helpjs Ravi
Exercícios/Tutorial/Desafios para Iniciantes em JavaScript
Stars: ✭ 579 (+6333.33%)
Mutual labels:  vanilla-javascript
Albinotonnina.com
source-code
Stars: ✭ 837 (+9200%)
Mutual labels:  vanilla-javascript
Mind Elixir Core
Mind-elixir is a framework agnostic mind map core
Stars: ✭ 798 (+8766.67%)
Mutual labels:  vanilla-javascript
View All Similar Projects ➔

Infinite Carousel

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).

Docs and demos.

Install

Download

CSS

JavaScript

Markup

Infinite Carousel works with a container element and a set of child item elements.

<div class="infinite-carousel-shell">
  <div id="container" class="infinite-carousel-group">
    <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>
</div>

JavaScript

/**
 * 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
});

Browser Support

Tested in the latest versions of:

  • Chrome (v41+)
  • Firefox (v36+)
  • Opera (v27+)
  • Safari (v8+)

License

Infinite Carousel is released under the MIT license.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].