Best jQuery Slider Plugins & Tutorials with Demo

jQuery camRoll Slider Plugin

jQuery camRoll Slider Plugin

camRoll is a jQuery slider plugin which enables the user to navigate between slides by clicking/taping the navigation thumbnails.

Draggable Image Strip with TweenMax

Draggable Image Strip with TweenMax

A draggable image strip layout with a content preview powered by Draggabilly and TweenMax.. The idea is to show a strip of differently sized images that can be dragged. When clicking and holding to drag, a title element appears and the images get scaled. This separates the images and gives the whole thing an interesting look. When a number gets clicked, the same separation happens and then the images fly up. Another larger version of the images slides in from the bottom.

Fullscreen Slider with JavaScript

Fullscreen Slider with JavaScript

This asset controls sections in a page. It resizes sections to fullscreen resolution and moves these individually by wheel/touch events.

Impressive Slideshow with 3D Effect

Impressive Slideshow with 3D Effect

A responsive and fullscreen slideshow that allows displaying content with impressive 3D, zoom, and text reveal effects.

Slideshow with Animated Circular Navigation

Slideshow with Animated Circular Navigation

A fullscreen, responsive slideshow with animated circular navigation. Depending on the thumbnail angle, circular navigation will rotate toward a certain direction.

In this article, I will show you how to create a fullscreen, responsive slideshow with animated circular navigation as well as how to easily make letter animations with the help of CSS3, jQuery and GSAP’s TweenMax, TextPlugin and CSSPlugin.

Sticky Image Effect with Three.js

Sticky Image Effect with Three.js

A recreation of the sticky image effect seen on the websites of MakeReign and Ultranoir using three.js.

FormSlider : Logical Slide Form Pages with jQuery

FormSlider : Logical Slide Form Pages with jQuery

This jquery.formslider integrates a modified Flexslider with logical slide pages that can have features and behaviors provided by plugins.

The main goal is to have different actions triggered depending on what type the actual slide page is. You can stop going forward when a formula is invalid for example.

The Library is very small, performance optimized, full responsive and touch capable. You can easily write you own plugins and implement custom slide behavior.

Crossroads Slideshow with CSS & TweenMax

Crossroads Slideshow with CSS & TweenMax

Today we’d like to share an experimental slideshow with you. The main idea is to show three slides of a slideshow that is slightly rotated. The titles of each slide, which serve as a decorative element, overlay the images and are rotated in an opposing angle. This creates an interesting look, especially when animated. When clicking on one of the lateral slides, the whole thing moves, and when we click on the middle slide, we move everything up and reveal a content area.The animations are powered by TweenMax.

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.