Best jQuery Slider Plugins & Tutorials with Demo

    jQuery slideshow plugin with subtle Ken Burns effect : Subtle-Slideshow

    jQuery slideshow plugin with subtle Ken Burns effect : Subtle-Slideshow

    A jQuery slideshow plugin (haha yes another one) with a subtle Ken Burns effect using CSS3 animations. It has no controls or anything fancy like that, just some tasteful animation and transition effects, which you can customize. The slides can contain anything you want (images, videos, etc.), but images are best supported. On this demo page you can see an example of what it can look like.

    Microsite Concept with Rotating Background

    Microsite Concept with Rotating Background

    An animated microsite concept with rotating background made with CSS3, jQuery and GSAP’s TweenMax. A microsite is an individual web page or small cluster of web pages that act as a separate entity for a brand. A microsite typically lives on its own domain, but some exist as a subdomain. Companies have different reasons for investing in microsites. Microsites have the advantage of opening wide out-of-the-box thinking and strategy and can be used to help brands achieve a number of things. For example, some companies have used them to highlight a specific campaign or target specific buyer personas. Others have used them to tell a short story or to inspire a specific call-to-action.

    Text Trail Effect with CSS & TweenMax

    Text Trail Effect with CSS & TweenMax

    Today we’d like to share a little text effect for a slideshow with you. It’s based on the animation seen in the Dribbble shot Abstract is hiring. The idea is to show a trail of a text when transitioning between slides of a slideshow. The animations are made using TweenMax.

    Layer Motion Slideshow with CSS Grid & TweenMax

    Layer Motion Slideshow with CSS Grid & TweenMax

    Today we’d like to share yet another CSS Grid-powered slideshow with you. The idea is to show and hide images with a reveal effect and add a parallax like effect to the main image and the title. For the title we’ve added two copied layers with an outline style which creates an interesting motion effect. For the animations we use TweenMax.

    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.