Best jQuery Slider Plugins & Tutorials with Demo

Motion Transition Effect CSS & TweenMax

Motion Transition Effect CSS & TweenMax

Today we’d like to share a little speedy motion effect with you. The idea is based on the Dribbble shot Ping Pong Slow Motion by Gal Shir where you can see a ping pong ball being shot from one racket to the other. The motion in the animation is enhanced by squeezing the ball and making some background stripes’ height pulsate. This is exactly what we want to do in a slideshow transition: we’ll squeeze the image and add some background effect. Additionally, we’ll make the letters of the title fly away consecutively.

Circular Slider with Anime.js

Circular Slider with Anime.js

The circular carousel/slider was built to provide web developers creative alternative to all those standard carousels/sliders. It was built with javascript animation engine anime.js.

Glider 3D Photo Slider

Glider 3D Photo Slider

Glider – is a simple slider script that automatically animates layers of still imagery for creating illusion of 3D. It pans and zooms photo in any direction to achieve Ken Burns 3D effect.

Beer Slider : Responsive & Accessible Before-After Slider

Beer Slider : Responsive & Accessible Before-After Slider

Beer slider is a vanilla JS keyboard accessible plugin for any before-after comparison.

It’s basic purpose is to compare two versions of an image, for example the same object shot in two different moments, a pre-edited photo and its processed version, a sketch and the finished illustration, etc.

It can be particularly useful with photo presets (Lightroom presets, Photoshop actions, etc.).

Diagonal Slideshow with JavaScript & CSS

Diagonal Slideshow with JavaScript & CSS

A slideshow with a “diagonal” look and three visible slides. A decorative background element expands to fullscreen when opening the content preview.The animations are powered by TweenMax.

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.