Best jQuery Slider Plugins & Tutorials with Demo

LayerJS: Javascript UI Composition Framework

LayerJS: Javascript UI Composition Framework

layerJS is an open source Javascript UI/UX library allowing intuitive, visually intense, mobile app-like experiences for web apps and websites.

layerJS follows the idea that any kind of interactive web content is composed of media elements on moving layers. Unlike existing UI frameworks, layerJS does not provide various UI elements (use your favorite framework for that) but focusses on how larger blocks are put together to form websites and apps and how these blocks will behave upon user interaction.

UX patterns like menus, sliders, layers & lightboxes, parallax effects, page-swipes, zoom effects, etc. are really justinteractive animated layers. layerJS is a simple open source library that provides one simple universal concept to create such patterns in pure HTML.

Elastic Slider : Animated Slider with SVG clip-path

Elastic Slider : Animated Slider with SVG clip-path

Elastic Slider is an experimental slider using SVG clip-path feature and animations powered by Snap.svg.

Los Scrollos : jQuery plugins for Scrolling Overflow Content

Los Scrollos : jQuery plugins for Scrolling Overflow Content

Los Scrollos is a simple jQuery plugins for scrolling overflow content.

Animating Elements Along SVG Paths with JavaScript

Animating Elements Along SVG Paths with JavaScript

Path slider is a animating elements along SVG paths with javascript.

CSS Glitch Effect Slideshow

CSS Glitch Effect Slideshow

A simple slideshow that uses the CSS Glitch Effect for the slide transitions. In a slideshow we have a different scenario: we want to apply the glitch effect at a specific moment and exchange the image with the new one of the next slide. This kind of animation can also be used for hover effects.

This slideshow does exactly that: it transitions to the next slide using the glitch effect. Under the hood, it exchanges the glitch layers one by one and stops glitching once the last image is switched.

jQuery Time Slider : Selection of Time and Date

jQuery Time Slider : Selection of Time and Date

jQuery Time Slider is a extension to jquery-base-slider with selection of time and date

Animated Fragment Slideshow with Anime.js & Pieces

Animated Fragment Slideshow with Anime.js & Pieces

Today we’d like to show you how to create a playful slider with an original fragmented look. Each element of the slider will be divided into pieces that will animate in different ways, using Pieces, a library that I’ve created for achieving interesting effects like these easily.

Slice Revealer : Simple Reveal Animation with Anime.js

Slice Revealer : Simple Reveal Animation with Anime.js

Today we’d like to share a simple reveal animation.The idea is to cover and uncover an image with slices to either hide or show it. The slices can be vertical or horizontal and can come from different directions. Playing with the number of slices, delays and colors, creates a plethora of possible looks for this effect.We are using anime.js for the animations.

DreamSlider : jQuery Image Slider Plugin

DreamSlider : jQuery Image Slider Plugin

DreamSlider is a jQuery image slider plugin with great visual effects.

Features:

  • Single image/Gallery mode to create an image slideshow with thumbnails
  • Small file size,easy to implement.
  • Quick load time due to progressive loading of images, which are beyond viewport using lazyloading technique
  • No additional thumb images required.
  • Hover effects for thumbnails : Zoom-in(default),bounce,standout.

Sequence.js : Step based Animations Slider

Sequence.js : Step based Animations Slider

Sequence.js is a CSS-driven framework for building responsive touch-enabled step-based animations. It is ideal for creating sliders, presentations, banners and other sorts of dynamic components. Among the several premium plans you will find a free one that grants you with a personal open-source license.