Best jQuery Slider Plugins & Tutorials with Demo

CoolCarousels : Showcasing 50+ cool jQuery carousel examples

CoolCarousels : Showcasing 50+ cool jQuery carousel examples

All carousels on this website are created for your inspiration, using only the jQuery-library and the jQuery.carouFredSel-plugin.They have been tested to work on FireFox and Chrome.

Vertical Showcase Slider with jQuery and CSS Transitions

Vertical Showcase Slider with jQuery and CSS Transitions

In this tutorial we will create a very simplistic and responsive product slider for an online store or a portfolio. The idea is to have different sections in a fullscreen view: the image or preview, a navigation and the description. When navigating through the items, we will slide the preview section and the section with the description in opposite directions. The idea for this kind of “opposite” transition comes from the beautiful website of the National LGBT Museum which moves the left and right side in the same manner when navigating or scrolling the page.

Cycle2 : Versitile Slideshow plugin for jQuery

Cycle2 : Versitile Slideshow plugin for jQuery

Cycle2 is a versitile slideshow plugin for jQuery built around ease-of-use. It supports a declarative initialization style that allows full customization without any scripting. Simply include the plugin, declare your markup, and Cycle2 does the rest.

Highlights:

  • Supports all browswers
  • Declarative: no scripting needed!
  • Responsive: fully control your slideshow via css (resize this page to see!)
  • Customizable: per-slide option overrides
  • Extensible: fully customizable API (on a per-slideshow basis if you wish)
  • Smart: supports image loading and delayed initialization
  • Smarter: supports progressive image loading
  • Out-of-the-box functionality for pagers, captions, overlays, and prev/next controls
  • Support for swipe gesture on mobile devices
  • Fade, scroll, shuffle, tile and carousel transitions
  • Bookmarkable slides

jQuery Cute Slider – 3D & 2D HTML5 Image Slider

jQuery Cute Slider - 3D & 2D HTML5 Image Slider

Tired of boring flat sliders? Looking for a unique slider? Here’s what you want,with Cute Slider you will be able to show your slides with awesome 3D & 2D transitions.Cute Slider makes your ideas alive, It gives you desire,you can use it as an advanced 2D slider with tons of 2D transitions, or add third dimention to your slider and create a unique and inpressive 3D slider.

Features :

  • 3D & 2D effects
  • 100+ prest transitions
  • 3 fallback levels(CSS3D, Canvas, 2D)
  • Cross Browser
  • Device friendly
  • Youtuve and Vimeo videos
  • Search engine optimized

Creating a Flipbook Image Slider with CSS3 3D Transforms and jQuery

Creating a Flipbook Image Slider with CSS3 3D Transforms and jQuery

Recently the ‘flip book’ effect has become really popular on a lot of websites, so I got to thinking about how you could go about pulling off that effect using some jQuery and CSS3. I find that most of the implementations of this code can get a little bit complicated, so I tried to make things as simple as possible.

We’re going to write this code as a jQuery plugin, so first you need to include jQuery. Next we want to include a script called Modernizr. We only need 3D Transforms, and you can download the required script from here. This will ensure everything will work fine in browsers which do not support 3D Transforms. Then you have to make a file called jquery.pictureflip.js which will be where we’re putting our plugin code!

Fireworks.js : Javascript Animation Experiment

Fireworks.js : Javascript Animation Experiment

Fireworks.js is a bit of Javascript that creates starburst-type explosions in a web document; in short, it’s a fireworks effect someone could theoretically use on their site. And come on, who doesn’t want something like that? As far as appropriateness is concerned, this effect could be compared to the dripping-blood-line, skull and fireball animated .GIF images so popular on the web in 1997. Exploding firework animations are hot, the new black, the script equivalent of the blink tag. Mmm, blink tag.

Sliding Image Gallery jQuery Plugin

Sliding Image Gallery jQuery Plugin

The idea behind this plug-in is to display a varying number of images in an attractive and easy to use manner. The inspiration for this plug-in this iTunes album viewer. The SlidingGallery plug-in will take a group of images and turn them into a cyclical gallery of images which the user can click through. One image will be centered on the screen, with two smaller images off to the sides. The user can click either of the smaller images to bring them to the center, or the center image to enlarge it. For optimal use, this plug-in should be applied to seven or more images, but can work with fewer (images will be duplicated in order to bring the total to seven).

BookBlock: A Content Flip jQuery Plugin

BookBlock: A Content Flip jQuery Plugin

BookBlock is a jQuery plugin that can be used for creating booklet-like components that allow a “page flip” navigation. Any content can be used, such as images or text. The plugin transforms the structure only when needed (i.e. when flipping a page) and uses some overlays as shadow for the pages to create more realism.

We will be using jQuery++ by Bitovi which has some add-ons for jQuery (specifically, to add the swipe event).

Full Screen Responsive jQuery Image and Content Slider:RSlider

Full Screen Responsive jQuery Image and Content Slider:RSlider

Image sliders add life and interactivity to your web contents. But creating an image slider from scratch is not that easy. You need some good programming skills to create your own slider. If you are not the programmer or you just don’t want to re-invent the wheel, RSlider is for you. Its a full screen responsive image and content slider powered by the fantastic javascript library jQuery. With a nice and simple design it adjusted automatically to the width of your browser screen.

Lemmon Slider : jQuery Carousel With Variable Elements Widths

Lemmon Slider : jQuery Carousel With Variable Elements Widths

Lemmon Slider is a jQuery-based carousel that supports slided elements with variable widths. It’s lightweight and very simple to use.

Features

  • Can slide any kind of content ULs, OLs, DIVs, etc.
  • Supports variable elements widths
  • Sliding by one element or by a page
  • Supports looping
  • Supports infinity NEW (since v0.2)
  • Tested in Firefox, Chrome, Safari, Opera, IE6+