Best jQuery Slider Plugins & Tutorials with Demo

slideControl : jQuery plugin for input slider

slideControl : jQuery plugin for input slider

slideControl jQuery Plugin.This plugin allows you to create nifty slider controls for text inputs.You can change the look of your slide controllers in there from background color to size to how the handle looks. Just take a look around and it should be pretty easy to make changes.

Wope Slider : jQuery Responsive Layer Slider

Wope Slider : jQuery Responsive Layer Slider

Wope slider is a light, fast, clean, elegant, responsive and touchable slider. It allows you to create a powerful slider to showcase your products or service effectively and attractively with many gentle, eye-catching effects.
The slider works well on modern moblie devices such as tablets, smartphones because it is touchable and responsive with any size of website.

Features:

  • Touch enabled.
  • Responsive-ready.
  • Multiple Sliders
  • Autoplay features, pause and play buttons.
  • Gui options
  • Easy slider options
  • 10 clean and elegant skins
  • Many animation types and easings
  • Fully documented & Free Support
  • Compatible with all major browsers

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).