Best jQuery Slider Plugins & Tutorials with Demo

    tabSwitch : jQuery tab/slider plugin

    tabSwitch : jQuery tab/slider plugin

    tabSwitch is a tab/slider plugin for jQuery. You could make a tab box system with the least of code and still fully customizable. Currently, you could choose from 7 different effects with 2 view styles. You could also hot swap the effects around in runtime.

    • There is no limit what kind of HTML tag you use.
    • You could move to next, prev tab or jump to a specific tab.
    • All the controls could be anywhere in the website, on top of a tab, inside a tab…
    • Multi-level tab system.
    • You could change the style of the viewport, you could add a class for every single tab…

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