Best jQuery Slider Plugins & Tutorials with Demo

Slide Out Box Menu with CSS Grid & TweenMax

Slide Out Box Menu with CSS Grid & TweenMax

Today we’d like to share a little menu with you. The idea is to reveal the boxes of a grid individually from the top right corner of the page similar to the Expanding Grid Menu we did a while back. The animations are powered by TweenMax.

Motion Reveal Slideshow with CSS & TweenMax Js

Motion Reveal Slideshow with CSS & TweenMax Js

Today we’d like to share another slideshow with you. The idea is to have a bit more of motion when navigating between the slides and showing another preview part with a fullscreen image.The animations are powered by TweenMax.

Canvas Slicer Slider with JavaScript

Canvas Slicer Slider with JavaScript

Canvas Slicer is a unique and easy to use slider with awesome transition effects, which you can also create yourself. Written with pure object oriented javascript. It has easy to implement and configure. This slider will add your page eye-catching effect.

  • 9 unique animation effects or set your effect.
  • Responsive
  • Directional navigation
  • Touch screen support
  • Helpful API functions are provided
  • Developed with pure object oriented javascript
  • Simple clean and valid markup

Bootstrap 4 Carousel Responsive jQuery Plugin

Bootstrap 4 Carousel Responsive jQuery Plugin

Bootstrap 4 carousel contains different types of carousels including slider with thumbnails, multiple items carousel, fade effect carousel, bootstrap image slider gallery etc.

Features:

  • Compatible With Bootstrap 4
  • Compatible With Bootstrap 3
  • 100% Responsive And Mobiles friendly
  • Support Bootstrap Columns Grid System
  • 200+ pre-built layouts and examples
  • 150+ Documentation Files
  • 40+ Text and Images Layers Animation Effects
  • 8+ Slides Transition Effects
  • Support Thumbnails Navigation
  • Support HTML5, YouTube, Vimeo Videos
  • Full Screen, Multiple items, Videos Background layouts

Triple Panel Reveal Slideshow with TweenMax

Triple Panel Reveal Slideshow with TweenMax

Today we’d like to show you a little slideshow design with a “triple panel” layout. The infinite slideshow shows a preview of the next and previous slide on both sides of the page. When navigating we use a reveal effect for all three images and animate the titles. The animations are powered by TweenMax.

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.