Best jQuery Slider Plugins & Tutorials with Demo

    jQuery Immersive Slider

    jQuery Immersive Slider

    Immersive Slider let you create a unique immersive slider experience that changes the whole container to match the viewing slide like you see at the Google’s TV website. The plugin will let you assign background images per slide without you doing all the hard work.

    The plugin is capable of blurring the first image it finds in each slide, blow them up and use it as a background without you having to manually set each slide a background image. This is done using the CSS3 style called Filter which only works on Chrome, and maybe a performance hog.

    brandsBox : Logos Slider jQuery Plugin

    brandsBox : Logos Slider jQuery Plugin

    Logos slider jQuery plugin.

    Features:

    • Responsive
    • Configurable Grid
    • Hardware, CSS3 Transitions
    • 6 Smooth Sliding Transitions
    • Animations Speed Control
    • Hover Effects
    • 6 Color Modes for Logos
    • Logos Opacity Control
    • Sliding Modes
    • XML / JS Items Management
    • Major Browsers Support

    Storyline 3D Slider with jQuery & CSS3

    Storyline 3D Slider with jQuery & CSS3

    Storyline 3D Slider is a great plug-in for your template, which will make it have a stunning look. The S-3D-S will help you showcase your work in a splendid creative way. Your products has never been displayed so great!

    If you are a proud author or musician or super talented designer, blogger or photographer – the S-3D-S is just for you! It offers 19 colour schemes, 8 scroll effects, 6 slide styles, responsive design, infinite scroll & possibility to work smoothly on mobile devices. You can include your own html code and make your own styles to fit your site.

    Features:

    • 19 color schemes
    • 8 incredible scroll effects
    • 6 different post styles (blog, circle, image, audio, book, text)
    • 5 ways to navigate trough slides
    • Responsive design
    • Touch enabled
    • Infinity scroll
    • Lots of different post settings
    • Custom image roll over settings
    • CSS3 and JQuery powered effects

    7 Slider : jQuery Responsive Image Slider

    7 Slider : jQuery Responsive Image Slider

    7 Slider is one of the most complete image slider ever. It is built in latest jQuery and mobile compatible so anyone can easily use it without any restriction. And it is fully responsive and modern features like Video embed,Lightbox are supported which make it more stunning.

    Features:

    • 250+ wonderful animations(2d,3d) – Animations will come more as new version released.
    • Native browser support
    • Html5/Css3 transitions support – It uses html5/css3 transition for modern browsers.
    • Image Overall Loading – 7 Slider loads all images at once so that he/she doesn’t wait again while slides.
    • Image Preview support – 7 Slider provides image preview option on hover.
    • Customizable width and height – Width and height can be set.
    • Fully responsive – It’s fully responsive so it can be attached in touch device.
    • Full width functionality involved – Full width slider is available
    • Lightbox support – It supports lightbox based on users’ demand.
    • Touch device support – Touch events are supported.
    • Mouse swipe navigation support – Swipe functionality is available so users feel comfortable to navigate.
    • Video content support(Youtube,Vimeo) – Embeded videos are supported.

    Animations for Thumbnail Grids with CSS3 & JavaScript

    Animations for Thumbnail Grids with CSS3 & JavaScript

    Today we’d like to share some fancy animations for thumbnails in a grid with you. There are many possibilities when it comes to these kind of effects, but not all of them fit well when applied to multiple items, like a grid of images. There is not much space and we have to consider the stacking order of the items for the effects to look nice. An interesting thing is that we can play with delays, intensifying the viewing pleasure of the whole thing. Not only can we apply the delays in order, but randomly or reversed.

    mightySlider : jQuery Responsive Slider

    mightySlider : jQuery Responsive Slider

    mightySlider is a jQuery plugin for creating advanced one-directional slider with item based navigation support.

    It can be used as a simple image slider, slideshow, HTML content slider, gallery, banner rotator, video gallery, carousel or even presentation. This is achieved by a powerful & developer friendly API that provides a bunch of very useful methods giving you control over everything.

    Features:

    • Responsive design.
    • Animated HTML captions with customizable effects.
    • Easy installation in your Website.
    • Unlimited Slides.
    • Unlimited Caption Layers.
    • Unlimited Caption Effects.
    • Native browser fullscreen support.
    • Cross browser, supports Chrome, FireFox, Safari, Opera and IE7+.
    • Device friendly, works in iPhone, iPad, Android Devices and Windows Phone.
    • Highly User Interface Design.
    • Fully customizable, it’s possible to customize or redesign all parts of mightySlider.
    • Search engine optimized (SEO).
    • YouTube and Vimeo videos are supported.
    • Super smooth hardware accelerated CSS3 transitions for supported touch devices.
    • Smart lazy loading – loads nearby images in background, so users don’t need to wait each time and images are available instantly.
    • Simple clean & valid markup.
    • Deep linking – link to specific slide from URL.
    • Adjustable speed, transition and easing for each caption or slide.
    • Auto cycling with optional pause on hover.
    • Thumbnails, Tabs or bullets for navigation.
    • Multiple sliders allowed on one page.
    • Keyboard support.
    • Touch support.
    • Mouse support: (Click, Wheel).

    Ion.ImageSlider : jQuery image slider with lightbox and skin support

    Ion.ImageSlider : jQuery image slider with lightbox and skin support

    jQuery image slider with lightbox and skin support.

    Features:

    • Ion.ImageSlider — nice and powerful image slider and lightbox at once.
    • Lightbox supports keyboard controls with ESC, LEFT and RIGHT button.
    • Crossbrowser: Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+)
    • Ion.Image Slider supports touch-devices (iPhone, iPad, etc.).

    ion.zoom : Image zoom lightbox jQuery plugin

    jQuery lightbox plugin for image zoom

    Image zoom lightbox jQuery plugin.

    Description:

    • ion.zoom — easy image lightbox jQuery plugin for small galleries. Allow to zoom images at place.
    • Supports keyboard controls with ESC, LEFT and RIGHT button.
    • Supports multiple independently operating galleries in one page.
    • Crossbrowser: Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+)
    • Works on touch screen devices (iPhone, iPad, etc.).

    Cream Soda Responsive jQuery News Ticker

    Cream Soda Responsive jQuery News Ticker

    Cream Soda jQuery Ticker is an ultra light, responsive, plug and play component that you can drop straight into your website. jQuery Ticker looks professional, with clean styling and elegant sliding animations. This version of Cream Soda jQuery Ticker supports three modes; vertical, horizontal and mini.

    Features:

    • Responsive
    • Cross Browser Compatible
    • Light & Ultra Customisable
    • Minimal coding required
    • Three ticker types (Vertical, Horizontal & Micro)
    • Custom Animation Options
    • Custom CSS Options
    • Highlight featured items
    • Excerpt/Truncate Options
    • Navigational Buttons
    • Supports imagery
    • Auto play options
    • Smart pausing and interaction options
    • Accepts static content or XML/RSS feed content
    • Custom links from each item
    • Custom link targets
    • Manage item lengths

    Blindify : jQuery Slideshow featuring a blinds effect transitioning

    Blindify : jQuery Slideshow featuring a blinds effect transitioning

    Blindify is a jQuery plugin which creates a slideshow featuring a blinds effect transitioning (either vertical or horizontal) between a list of images.

    I saw a photograph in a printed magazine which inspired me to create a JavaScript effect that would make any photo look exactly like that. After I created this effect, I altered the code into a proper transition effect to be used as a slideshow, using multiple images. I am now going to walk you through how it was built.