jquery-image-slider

30 jQuery Image Slider Plugins and Tutorials

jQuery image slider

jQuery image slider plugins are very popular these days and found on many many websites. There are several interesting use cases for image sliders, however I think it is most common to use them on the front page to showcase featured articles or products. I’m a great fan of jQuery because it is easy to use, proven and then there are literally hundreds if not thousands of free plugins available. There is also a good selection of Image slider plugins available and I believe they improve all the time. In particular worth mentioning is that they are typically lightweight (fast download), feature rich and look professional. Lately some of the jQuery image sliders have got some really cool transition effects as well. In this article you will find both jquery image sliders plugins and tutorials showing you how image sliders can be created from ground up. This post has just been updated with new sliders.

Cool jQuery Image Slider Plugins

SALOON

Saloon is a jQuery Banner Rotator which animates your image and text slides with transition effects of the wide library. Easy installation, great transitions and text animations define the freshline style. See the heaps of custom transitions/animations for each object on the page! Customize this slider with just a little HTML and CSS to your very needs. Give each slider a description and more elements to transport your message.

The touch style drag and rool feature if pretty cool.

Saloon jQuery Image Slider Plugin

MORE INFO / DEMO – by CodeCanyon (premium plugin)

SLIDES

SLIDES

Slides is a slideshow plugin for jQuery that is built with simplicity in mind. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.

MORE INFO / DEMO

LAYERSLIDER (MUST SEE EFFECTS)

LAYERSLIDER

This is a jQuery content slider using the famous parallax-effect! You can create as many layers and sublayers as you want. You can use images or any other HTML elements, including Flash movies as layers. The script is very user-friendly, you can add global settings or local (per slide) settings to each layer or sublayer. You can change delay times, easing types, durations and much more.

MORE INFO / DEMO – by CodeCanyon (premium plugin)

COIN SLIDER

Coin Slider

As with most well written jQuery image slider plugins you can get awesome features on your web pages with only a few lines of code. Coin Slider is an excellent script for showcasing images on a web site or blog, fx. an online portfolio.

MORE INFO / DEMO

FACTORY GALLERIES

FACTORY GALLERIES

You can create all Galleries you want with elegance and style. The sliding wffect for both images and text is pretty cool.

MORE INFO / DEMO – by CodeCanyon (premium plugin)

JQUERY BANNER ROTATOR / JQUERY SLIDER

jquery banner

This is a jQuery image slider plugin featuring multiple transitions. The thumbnails and buttons allow for easy navigation of your banners/ads. The banner rotator is also re-sizable and configurable through the plugin’s parameters.

MORE INFO / DEMO – by CodeCanyon (premium plugin)

SUPERSIZED

Supersized

Awesome full size/screen jQuery image slider plugin. It resizes the images to fill browser while maintaining image dimension ratio. Further it cycles Images/backgrounds via slideshow with transitions and preloading

MORE INFO / DEMO

AVIA SLIDER

AVIA SLIDER

This plugin features 8 unique transition effects, image preloader, autoplay that stops on user interaction and lots of easy to set options to create your own effects.

MORE INFO / DEMO – by CodeCanyon (premium plugin)

NIVO SLIDER

NIVO SLIDER

Great and flexible jQuery image slider plugin with awesome transition effects. This plugin have 9 unique transition effects. It is very popular and used a lot by WordPress theme developers building sliders into the themes. Another option of course is to use a WordPress slider plugin.

MORE INFO (Free plugin, premium developer packabe available)

ADVANCED SLIDER

ADVANCED SLIDER

Advanced Slider is a jQuery plugin that allows you to easily create powerful sliders using either XML , thus making the slider much easier to setup and maintain, or using HTML markup. The plugin also provides an easy to use API which will allow to further enhance the functionality of the slider and make it possible to integrate it into your own application. Please take a look at the list of features below.

MORE INFO / DEMO – by CodeCanyon (premium plugin)

DRAGDEALER

Dragdealer

Dragdealer is much more than a simple image slider. It offers a wide variety of features related to dragging, but is also quite powerful for creating different types if image sliders. I recommend you go to the website and try out the demos.

MORE INFO / DEMO

ESTRO JQUERY EFFECT SLIDER

ESTRO JQUERY EFFECT SLIDER

This jQuery image slider plugin uses unobstrusive javascript to transform a block of simple HTML markup into a georgous elegant slider, which can be completely customized using HTML5 data attributes. The markup is valid HTML5 and SEO optimzied, with all content always being available to search engines. When using this plugin, your page layout will be consistent even if javascript has been disabled. This slider includes a smooth and powerful Ken Burns effect which is completely configurable and compatible with all major browsers (including ie7 to ie9, Firefox Chrome, Opera, Safari) and mobile platforms like iphone / ipad. If the Ken Burns effect is not your thing, that’s OK because the “Estro” slider also includes a 2-way “Swipe” mode with configurable transitions.

MORE INFO / DEMO – by CodeCanyon (premium plugin)

PRESENTATION CYCLE

Presentation Cycle

Cycle is a script that supports image presentations to easily display multiple images. This script supports a lot of effects and the cycling of html elements. Presentation Cycle is a variation on the functionality of Cycle. Instead of generating a list of numbers that are clickable Presentation Cycle generates a progress bar that shows when the new slide will appear.

MORE INFO / DEMO

SEXY SLIDER

SEXY SLIDER

SexySlider is a jQuery slider plugin that lets you easily create powerful javascript Sliders with very nice transition effects. Enhance your website by adding a unique and attractive slider!

MORE INFO / DEMO – by CodeCanyon (premium plugin)

ANYTHINGSLIDER

ANYTHINGSLIDER

AnythingSlider is an attempt at bringing together the functionality of all of those previous sliders and adding new features. In other words, to create a really “full featured” slider that could be widely useful.

MORE INFO / DEMO

EASYSLIDER

Easy Slider 1.7 – Numeric Navigation jQuery Slider

Great jQuery image slider plugin for content and images. It is very easy to use – only a few lines of code is needed.

MORE INFO / DEMO

AVIASLIDER

aviaslider

Very feature rich and good looking image slider. 8 unique transition effects

MORE INFO / DEMO

JQUERY SLIDER EVOLUTION

JQUERY SLIDER EVOLUTION

Slider Evolution is a JQuery plugin that lets you easily create powerful javascript sliders with very nice transition effects. Enhance your website by adding a unique and attractive slider!

Create an unlimited number of sliders with customized settings for each one, and place them anywhere on your website with ease.

MORE INFO / DEMO – by CodeCanyon (premium plugin)

3D ROTATION VIEWER

3D ROTATION VIEWER

This cool stuff easily creates a 3D rotation viewer in UIZE that lets users rotate the view of an object a full 360 degrees using a mouse, or finger on the Apple iPad.

MORE INFO / DEMO

HORINAJA

horinaja

Horinaja is a ready-to-use slide-show implementation, utilizing either scriptaculous/prototype or jQuery. A running example above. It allows you to use a mousewheel for navigation.

MORE INFO / DEMO

jqFancyTransitions

jqFancyTransitions

jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects. ‘wave’, ‘zipper’ and ‘curtain’ effect, plus options that can be used for custom effect.

MORE INFO / DEMO

Agile Carousel

Agile Carousel

Jquery plugin that allows you to easily create a custom carousel. Call Jquery UI to enable many different additional transition types and easing methods. Uses PHP to draw images from the folder you specify. Configure many different options including controls, slide timer length, easing type, transition type and more!

MORE INFO / DEMO

KEN BURNER

KEN BURNER

Kenburner is the premium way of using a slider in your website. A combination of Ken Burns Effect, state-of-the-art Slider and Text Animations defines this slider.

Customize this slider with just a little HTML and CSS to your very needs. Give each slider some captions to transport your message. Use your Ken Burns Animated banner elements with the possibility of playing YouTube and Vimeo clips in a special detail view with describing text.

MORE INFO / DEMO – by CodeCanyon (premium plugin)

GALLERIA

GALLERIA

Galleria is a JavaScript image gallery written in jQuery. Images are loaded one by one from an unordered list and displays thumbnails when each image is loaded. Galleria and a few themes are free to use under the MIT license. More advanced themes, better licensing options, support, integrations for wordpress etc. will soon be available as a premium membership.

MORE INFO / DEMO

ALL IN ONE JQUERY ROTATOR – CONTENT SLIDER

ALL IN ONE JQUERY ROTATOR

Support 6 different slider formats.

Support 6 different slider formats.

MORE INFO / DEMO – by CodeCanyon (premium plugin)

PANNING SLIDESHOW

PANNING SLIDESHOW

This slideshow has the ability to showcase imagery automatically. This is a twist from classic slideshows which uses a kind of transition to animate between slides.

MORE INFO / DEMO

jQuery Image Slider Tutorials

Automatic Image Slider w/ CSS & jQuery

Automatic Image Slider w/ CSS & jQuery

How to Create a Simple iTunes-like Slider

How to Create a Simple iTunes-like Slider

Animate Panning Slideshow with jQuery

Animate Panning Slideshow with jQuery

A Beautiful Apple-style Slideshow Gallery With CSS & jQuery

A Beautiful Apple-style Slideshow Gallery With CSS & jQuery

Other sliders worth considering (Not jQuery)

cu3er

cu3er

Flash slider with the most awesome transition effects you can imagine!

Piecemaker XML Gallery

Piecemaker XML Gallery

Another Flash slider with cool transition effects. This is actually a tutorial and you can learn how to create it yourself! Want to keep on surfing? Have look at these Drupal 7 Themes maybe this is what you’re looking for. Also don’t miss these best wordpress themes if you’re looking for a great theme for your website.

Related Posts


17 thoughts on “30 jQuery Image Slider Plugins and Tutorials

  1. Janean Bulmer

    Hello! Someone in my Myspace group shared this website with us so I came to look it over. I’m definitely loving the information. I’m bookmarking and will be tweeting this to my followers! Fantastic blog and brilliant design and style.

    Reply
  2. kore dizileri izle

    I necessary for this blog post admin really thanks i’ll seem your upcoming sharings i bookmarked your blog

    Reply
  3. Ward Karapetyan

    I just want to mention I am just new to blogging and site-building and really loved your web site. Very likely I’m likely to bookmark your site . You absolutely have wonderful posts. Thanks for sharing with us your website.

    Reply
  4. Dawne

    Great a single blog site manager triumph web site post wonderful sharings in this blog site continually have exciting

    Reply
  5. asphalt 7 apk

    This is the penalize jQuery Image Slider Plugins and Tutorials | Web Duos diary for anyone who wants to seek out out some this content. You observance so often its nigh exhausting to converse with you (not that I rattling would want…HaHa). You definitely put a new whirl on a subject thats been handwritten nigh for years. Overnice force, just large!

    Reply
  6. ghd hair straightener

    Do not think this although its free does not mean that it’s very good! If looking at different different options while in front of anyone, you should not disregard this.

    Reply
  7. gjaoiwiejawo

    This is the proper jQuery Image Slider Plugins and Tutorials | Web Duos blog for anyone who wants to move out out nigh this content. You respond so much its near exhausting to debate with you (not that I truly would want…HaHa). You definitely put a new acrobatics on a subject thats been shorthand some for geezerhood. Pleasant nonsensicality, only uppercase!

    Reply
  8. best Life Quotes

    I’m not sure where you are getting your info, but great topic. I needs to spend some time learning more or understanding more. Thanks for magnificent information I was looking for this jQuery Image Slider Plugins and Tutorials | Web Duos for my mission.

    Reply
  9. best Life Quotes

    jQuery Image Slider Plugins and Tutorials | Web Duos I was suggested this blog by my cousin. I’m not sure whether this post is written by him as nobody else know such detailed about my problem. You’re wonderful! Thanks! your article about jQuery Image Slider Plugins and Tutorials | Web DuosBest Regards Lisa

    Reply
  10. best Life Quotes

    jQuery Image Slider Plugins and Tutorials | Web Duos I was suggested this web site by my cousin. I’m not sure whether this post is written by him as no one else know such detailed about my problem. You’re amazing! Thanks! your article about jQuery Image Slider Plugins and Tutorials | Web DuosBest Regards Shane

    Reply
  11. Sammy Naidu

    I just want to tell you that I am very new to weblog and really liked you’re blog site. Almost certainly I’m going to bookmark your site . You really come with very good well written articles. Regards for sharing your website page.

    Reply
  12. sherwani for grooms

    I think this is one of the most vital information for me. And i am glad reading your article. But want to remark on some general things, The web site style is great, the articles is really excellent : D. Good job, cheers!

    Reply
  13. Pete Bjorn

    I just want to tell you that I’m newbie to blogging and site-building and really loved this page. Likely I’m planning to bookmark your site . You amazingly come with tremendous articles and reviews. Thank you for revealing your blog site.

    Reply
  14. NHSEO review

    Good post. I’m reviewing continuously this web site and i’m inspired! Beneficial facts precisely the final segment 🙂 My partner and i keep similarly info considerably. I was looking for this type of information for some time. Thanks a lot in addition to best of luck.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *


*