30+ Awesome jQuery Image and Slider Plugins from 2012

Posted in Tools, Web Design • Posted on 26 Comments

Those times when neat image effects were achieved with Flash are gone. jQuery has drastically changed the way developers work. Because its light-weight, easily customized and has unlimited possibilities, jQuery has become the new standard for displaying visual media on the web. For this roundup we’ve prepared 30 fresh, useful and simply awesome jQuery image and slider plugins that we’ve found this year. You’ll find some really stunning gallery solutions for every taste as well as some creative image effect plugins there.

Where can you use them? Sliders are the perfect solution for a product/work/content showcase. They don’t take up much space, are handy and look good. Look at these examples of neat slider usage.

Depth

Depth has a great solution to showcase photography photos. They’re using a slider to display the image full screen and placing the controls on right corner which is user friendly to navigate by the user. When the imageslide they really attract your attention and continue viewing the other photos. Breathing space is a must specially showcasing photos.

Preview

Of course, there are many various solutions in the list as well. Implementing large backgrounds, zooming images, optimizing them for retina displays, responsive/mobile
friendly, using videos in your galleries – you’ll find it all below.

Slider Revolution

Slider Revolution

Slider Revolution is a responsive(mobile friendly) or fullwidth slider with must-see-effects and meanwhile keep or build your SEO optimisation (all content always readable for search engines). See the heaps of custom
transitions/animations for each object on the page! Customize this slider with our convenient drag&drop backend to your very needs.

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

It’s a premium plugin, but I will tell you that you worth the penny you spend.

Few other important benefits to Slider Revolution:

  • Image and Thumbs fully resizable
  • Using CSS Animation with FallBack to jQuery
  • Unlimited Caption Layers
  • Captions like Video, Image and html tags can be easily Created
  • Unlimited Slides
  • iPhone & Android Swipe Touch enabled
  • jQuery Conflict free plugin
  • Customizable 100% via Plugin Backend
  • Easy installation in your Website

Worried about coding skills? Slider Revolution had a Video Support which is easy to follow no advance coding skills required, easy as cooking bacon. Ah..but what am I saying just check for yourself – Kenburner Responsive Jquery Slider has pretty good feature rundown and live examples.

2. Galleria

Galleria-jquery-image-gallery-plugins

Galleria is a JavaScript image gallery framework. The aim is to simplify the process of creating professional image galleries for the web and mobile devices.

3. Adipoli

Adipoli-jquery-image-gallery-plugins

Adipoli is a simple jQuery plugin with 20+ stylish image hover effects.

4. Slidorion

Slidoron-jquery-image-gallery-plugins

A combination of an image slider and an accordion, the Slidorion displays beautiful images along with a variable length description. With slides linked to each tab, and accompanied by a large array of effects, the Slidorion is a great alternative to the traditional jQuery slider.

5. Nivo Slider

Nivo-jquery-image-gallery-plugins

Nivo is an awesome jQuery and WordPress image slider packed with 16 transition effects, simple and clean markup and loads of settings to tweak.

6. Flexslider

Flexslider-jquery-image-gallery-plugins

An awesome, fully responsive jQuery slider plugin with simple markup, multiple slider support and custom navigation options.

7. Glisse.js

Glisse-jquery-image-gallery-plugins

Glisse.js is a simple, responsive and fully customizable jQuery photo viewer. You’ll like the transitions between two pictures entirely assumed by CSS3.

8. Sequence

Sequence-jquery-image-gallery-plugins

Sequence is the jQuery slider plugin with infinite style. It provides the complete functionality of a website slider without forcing you to use a set theme. In fact, Sequence has no built in theme, leaving you complete creative control to build a unique slider using only CSS3.

9. Slides

Slides-jquery-image-gallery-plugins

SlidesJS is a simple slideshow plugin for jQuery. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.

10. Rhinoslider

Rhinoslider-jquery-image-gallery-plugins

Rhinoslider is the most flexible jQuery slideshow there is. You are welcome to try it yourself. Not only does it offer a variety of effects, it also allows you to add your own styles, effects and features to the slider.

11. Pikachoose

Pikachoose-jquery-image-gallery-plugins

Pikachoose is a lightweight jQuery slideshow plugin, with tons of great features. jCarousel integrates smoothly with PikaChoose to give your gallery a simple and effective carousel. It can be customized in plenty of different ways.

11.1 Slider Revolution (premium – $12)

Is a creative plugin with tons of unique transition effects, an image preloaded, video embedding, auto play that stops on user interaction and lots of easy to set options to create your own effect.

12. Camera

Camera-jquery-image-gallery-plugins

Camera is a beautiful open source slideshow project. It works with all major browsers as well as mobile devices.

13. Quake Slider

Quake-jquery-image-gallery-plugins

Simple, easily customizable, beautiful slider with 3 color schemes and 40+ transitions.

14. bxslider

Bx-jquery-image-gallery-plugins

bxslider is an easy to implement jQuery custom content slider with a bunch of transition effects.

15. rcarousel

Rcarousel-jquery-image-gallery-plugins

rcarousel is no longer being updated, yet it still serves it’s purpose and you can feel free to tweak it for your needs.

16. iPicture

Ipicture-jquery-image-gallery-plugins

iPicture is a jQuery Plugin to create interactive pictures with extra descriptions.

17. jCrop

Jcrop-jquery-image-gallery-plugins

Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

18. Lazy Karl v1

Lazykarl-jquery-image-gallery-plugins

The lazyKarl jQuery plugin loads a webpage’s images once they are within the user’s viewport.This is a working cross-browser lazy load jQuery plugin. Other lazy load plugins have been less than effective because some major browsers load all of the images on a page when the DOM loads.

19. jQuery.popeye

Popeye-jquery-image-gallery-plugins

jQuery.popeye is an advanced image gallery script. Use it to save space when displaying a collection of images and offer your users a nice and elegant way to show a big version of your images without leaving the page flow.

20. TouchTouch

Touchtouch-jquery-image-gallery-plugins

TouchTouch is a jQuery plugin that turns a collection of photos on a webpage into a touch-friendly mobile gallery. It works on all major browsers (except for IE7 and below) and most importantly is specifically designed with iOS and Android in mind.

21. Better Backgrounds

Background-jquery-image-gallery-plugins

Better Backgrounds is a WordPress plugin which shows a random background image every visitor session (using a cookie), page refresh, or timed slideshow interval.

21.1 Layer Slider (premium – $15)


Is one of the most best slider plugin comes with an breathtaking 3D and 2D transitions, easy to use visual transition builder to create your own custom transitions and use it with your Slider. It supports unlimited types of usage image slider, image slider with text, content slider, video gallery and much more.

22. bgStretcher

Bgstretcher-jquery-image-gallery-plugins

bgStretcher jQuery plugin allows you to add a background image to page and proportionally resize it to fill entire window area.

23. Black and white

Bw-jquery-image-gallery-plugins

This plug-in can easily convert every colored image (in an html page) into a B&W grayscale image.

24. lake.js

Lake-jquery-image-gallery-plugins

Lake.js takes an img element and inserts a canvas element displaying the image and its flipped reflection directly after the img element.

25. jQuery Retina Plugin

Retina-jquery-image-gallery-plugins

Images that aren’t retina optimized look blown up and fuzzy on retina devices. At the moment, this is only the new iPad (aka, iPad 3), iPhone 4 and 4S. However, more and more devices will soon be retina enabled; from Android and Windows mobile devices, to OSX and Windows desktops. This is a jQuery plugin that will swap out the image source for an image that is sized for retina displays.

26. Nivo Zoom

Zoom-jquery-image-gallery-plugins

Nivo Zoom is a jQuery image zoom plugin with 5 different zooming types, support for HTML captions and loads of settings to tweak.

27. NailThumb

Nailthumb-jquery-image-gallery-plugins

Create thumbnails easily from high-res images, without any distortion, with one line of code.

28. aeImageResize

Resize-jquery-image-gallery-plugins

aeImageResize is a jQuery plugin to dynamically resize the images without distorting the proportions.

29. Riva Slider (premium – €19.99)

Riva-jquery-image-gallery-plugins

Riva Slider is the ultimate WordPress slider plugin. Create and display slideshows within minutes. No commotion and designed for ease of use, saving you tons of time to spend on things that matter.

30. HoverAlls (premium – $6)

Hoveralls-jquery-image-gallery-plugins

HoverAlls is a unique jQuery animation plugin that allows you to create animation effects quickly – without any knowledge of Javascript of jQuery. With over 40 settings, HoverAlls can create unique animations for nearly any type of effect desired.

31. Zuper Responsive Multitouch Slider (premium – $10)

Zuper-jquery-image-gallery-plugins

This Zuper Slider uses unobtrusive JavaScript and a powerful configuration panel for effects and design elements to transform a block of simple HTML markup into a beautiful elegant slider.

32. jQuery Banner Rotator (premium – $10)

Banner-jquery-image-gallery-plugins

jQuery banner rotator allows you to easily create powerful sliders with animated text using HTML standard tags, making the slider very easy to setup and maintain.

111 Written ArticlesWebsite

Works at 1stwebdesigner, studies photography at ISSPand seeks to enjoy life. You can check out his photography blog and follow him on twitter.

26 Comments Best Comments First
  • Fred

    Monday, July 30th, 2012 23:28

    23

    Wow this is fantastic collection. as Agnel Waghela says the wowslider is also good one. An integral part of modern webdesign.

    +6
  • Gvido

    Monday, June 18th, 2012 16:16

    1

    This is just in time for my project! Thx!

    +2
    • Dainis Graveris

      Wednesday, June 20th, 2012 14:24

      12

      Gvido? What a big surprise to see you hanging out here hehe! What kind of project is it? :)

      0
      • Gvido

        Friday, June 22nd, 2012 13:57

        16

        I check regularly here :)
        I’m creating page for Spa Salon, 1st page for me :D

        +1
        • Dainis Graveris

          Wednesday, June 27th, 2012 13:17

          21

          Oh nice, don’t forget to reach me out on FB to share your first outcome! :)

          -1
          • Gvido

            Wednesday, June 27th, 2012 15:28

            22

            Of course, will inform you

            -1
  • dan

    Friday, June 22nd, 2012 18:07

    17

    I am just looking for a simple image plugin, what that will link with the photos I have in my wordpress gallery. So when you look at photos on the post and click on them, instead of just popping up on the screen like now surrounded by gray, I just want a slider so you can go through all the images in that posts gallery. And I need it to adjust to any image size, most of these sliders need images to be a certain crop.

    Any suggestions!!? It’s such a simple thing I’m looking for but cant find it.

    +1
  • SJL

    Thursday, June 21st, 2012 05:24

    14

    Thanks for putting this great collection together Dainis. I really liked the Sequence horizontal parallax slider built with CSS transitions!

    +1
  • fastekdot

    Saturday, August 25th, 2012 15:23

    25

    The fact that there are so many different Jquery image sliders and plugins

    +1
  • Arun Kumar J

    Thursday, June 21st, 2012 00:17

    13

    Wow this is fantastic collection. as Agnel Waghela says the wowslider is also good one. An integral part of modern webdesign..

    0
  • Ashok

    Saturday, August 25th, 2012 07:48

    24

    Nice Dainis and great collection thanks for sharing very use and helpful again thanks

    0
  • Mobeen

    Monday, June 25th, 2012 13:04

    20

    nice and great collection thanks for sharing very use and helpful again thanks

    0
  • Paul Weston

    Monday, June 25th, 2012 03:53

    19

    Thought this was a great article and collection of plugins. The addition of jQuery in my site design and development plays an important part in how much impact a site can make in my opinion and this is why I love articles like this that show me what is available and out there. I really like the collection you have put together and think that all of the examples have great potential. The one that I really liked was the Adipoli image hover plugin. I love the variety of effects that you get and the smoothness of the transitions. Great article and I look forward to more like this from yourself.

    0
  • Nilesh Hingu

    Friday, June 22nd, 2012 13:22

    15

    Good collection of fancy and dynamic slider

    0
  • johanso

    Sunday, June 24th, 2012 17:26

    18

    that a good collection, I use some, but it’s good to know more

    0
  • Daniel Nolan

    Tuesday, June 19th, 2012 04:23

    2

    JQuery images sliders and plugins can enhance a web page design and provide more information for the viewer both easily and efficiently. You can use them to show the main points of your website and showcase inspirational imagery.

    The fact that there are so many different Jquery image sliders and plugins helps designers produce new and creative websites which are both visually appealing and easy to use. Thanks for sharing.

    -1
    • Dainis Graveris

      Tuesday, June 19th, 2012 05:27

      3

      Daniel, that’s right! Also clients usually will also love those fancy slider effects on their sites too! And will be impressed to see such effects in your own portfolio! Thanks for stopping by!

      0
  • Agnel Waghela

    Tuesday, June 19th, 2012 05:51

    4

    Hey Daniels, you forgot The Orbit Slider – http://www.zurb.com/playground/orbit-jquery-image-slider
    But thanks for the collection.. I love it…

    -1
    • Dainis Graveris

      Tuesday, June 19th, 2012 07:03

      5

      Oh Agnel, it is awesome addition! Thank you and glad you like this roundup!

      0
      • Agnel Waghela

        Tuesday, June 19th, 2012 07:40

        6

        Hii dainis, I have already read 2/3 ebooks… Very good work… I have always been a fan of 1WD… Will complete the 3rd one soon… one more addition – http://wowslider.com/ – The WowSlider

        0
        • Dainis Graveris

          Tuesday, June 19th, 2012 08:04

          7

          Hey Agnel, you should write follow up article on this one with so many additions!! :) Oh which ones did you read? And how did you like them? It’s for beginners with some good basics covered, curious!

          0
          • Agnel Waghela

            Tuesday, June 19th, 2012 08:15

            8

            I have read Html5 Website Basic Features And Elements In 1 Day and Web Design Trends, The Road To Good Website Design… Responsive Website design is remaining… very soon i’ll be completing it as well, was busy lately thats why couldn’t do it…
            I did think of writing a follow up article when i read it, but right now i’m improving a wordpress plugin named QrTipsy…

            0
          • Dainis Graveris

            Tuesday, June 19th, 2012 08:27

            9

            And how did you enjoy it? Btw..how long time it takes for you to read each book? They are intended to be a quick read!

            Heh, write to me when you change your mind :) What’s that plugin?

            0
          • Agnel Waghela

            Tuesday, June 19th, 2012 08:38

            10

            It took me around 20 to 30 min because simultaneously I was also visiting the links provided in the ebook along with every concept… I really loved reading :) those books because it has all the basic essentials that a beginner’s guide need to have. And Yes Qrtipsy a simple plugin which converts links in a post to a Qr code which on hovering is then presented in a tooltip. I’ll let you know when its complete.

            0
          • Dainis Graveris

            Tuesday, June 19th, 2012 09:56

            11

            Oh that’s quick, so cool! :) Like the way it actually work! hehe, I loved these books to read myself because I got familiar with all the basics and some cool details so quickly! :)

            Heh, glad to hear it worked the same way for you!

            Oh, and can you tell who exactly would use these for their own projects? Dream client for plugin?

            0
  • Pouya

    Friday, September 14th, 2012 10:02

    26

    Very goooooooooooooooooooooooooooooooooooooooood!
    Thank you :-D

    -4
  • Pouya

    Friday, September 14th, 2012 10:02

    26

    Very goooooooooooooooooooooooooooooooooooooooood!
    Thank you :-D

    -4
  • fastekdot

    Saturday, August 25th, 2012 15:23

    25

    The fact that there are so many different Jquery image sliders and plugins

    +1
  • Ashok

    Saturday, August 25th, 2012 07:48

    24

    Nice Dainis and great collection thanks for sharing very use and helpful again thanks

    0
  • Fred

    Monday, July 30th, 2012 23:28

    23

    Wow this is fantastic collection. as Agnel Waghela says the wowslider is also good one. An integral part of modern webdesign.

    +6
  • Mobeen

    Monday, June 25th, 2012 13:04

    20

    nice and great collection thanks for sharing very use and helpful again thanks

    0
  • Paul Weston

    Monday, June 25th, 2012 03:53

    19

    Thought this was a great article and collection of plugins. The addition of jQuery in my site design and development plays an important part in how much impact a site can make in my opinion and this is why I love articles like this that show me what is available and out there. I really like the collection you have put together and think that all of the examples have great potential. The one that I really liked was the Adipoli image hover plugin. I love the variety of effects that you get and the smoothness of the transitions. Great article and I look forward to more like this from yourself.

    0
  • johanso

    Sunday, June 24th, 2012 17:26

    18

    that a good collection, I use some, but it’s good to know more

    0
  • dan

    Friday, June 22nd, 2012 18:07

    17

    I am just looking for a simple image plugin, what that will link with the photos I have in my wordpress gallery. So when you look at photos on the post and click on them, instead of just popping up on the screen like now surrounded by gray, I just want a slider so you can go through all the images in that posts gallery. And I need it to adjust to any image size, most of these sliders need images to be a certain crop.

    Any suggestions!!? It’s such a simple thing I’m looking for but cant find it.

    +1
  • Nilesh Hingu

    Friday, June 22nd, 2012 13:22

    15

    Good collection of fancy and dynamic slider

    0
  • SJL

    Thursday, June 21st, 2012 05:24

    14

    Thanks for putting this great collection together Dainis. I really liked the Sequence horizontal parallax slider built with CSS transitions!

    +1
  • Arun Kumar J

    Thursday, June 21st, 2012 00:17

    13

    Wow this is fantastic collection. as Agnel Waghela says the wowslider is also good one. An integral part of modern webdesign..

    0
  • Agnel Waghela

    Tuesday, June 19th, 2012 05:51

    4

    Hey Daniels, you forgot The Orbit Slider – http://www.zurb.com/playground/orbit-jquery-image-slider
    But thanks for the collection.. I love it…

    -1
    • Dainis Graveris

      Tuesday, June 19th, 2012 07:03

      5

      Oh Agnel, it is awesome addition! Thank you and glad you like this roundup!

      0
      • Agnel Waghela

        Tuesday, June 19th, 2012 07:40

        6

        Hii dainis, I have already read 2/3 ebooks… Very good work… I have always been a fan of 1WD… Will complete the 3rd one soon… one more addition – http://wowslider.com/ – The WowSlider

        0
        • Dainis Graveris

          Tuesday, June 19th, 2012 08:04

          7

          Hey Agnel, you should write follow up article on this one with so many additions!! :) Oh which ones did you read? And how did you like them? It’s for beginners with some good basics covered, curious!

          0
          • Agnel Waghela

            Tuesday, June 19th, 2012 08:15

            8

            I have read Html5 Website Basic Features And Elements In 1 Day and Web Design Trends, The Road To Good Website Design… Responsive Website design is remaining… very soon i’ll be completing it as well, was busy lately thats why couldn’t do it…
            I did think of writing a follow up article when i read it, but right now i’m improving a wordpress plugin named QrTipsy…

            0
          • Dainis Graveris

            Tuesday, June 19th, 2012 08:27

            9

            And how did you enjoy it? Btw..how long time it takes for you to read each book? They are intended to be a quick read!

            Heh, write to me when you change your mind :) What’s that plugin?

            0
          • Agnel Waghela

            Tuesday, June 19th, 2012 08:38

            10

            It took me around 20 to 30 min because simultaneously I was also visiting the links provided in the ebook along with every concept… I really loved reading :) those books because it has all the basic essentials that a beginner’s guide need to have. And Yes Qrtipsy a simple plugin which converts links in a post to a Qr code which on hovering is then presented in a tooltip. I’ll let you know when its complete.

            0
          • Dainis Graveris

            Tuesday, June 19th, 2012 09:56

            11

            Oh that’s quick, so cool! :) Like the way it actually work! hehe, I loved these books to read myself because I got familiar with all the basics and some cool details so quickly! :)

            Heh, glad to hear it worked the same way for you!

            Oh, and can you tell who exactly would use these for their own projects? Dream client for plugin?

            0
  • Daniel Nolan

    Tuesday, June 19th, 2012 04:23

    2

    JQuery images sliders and plugins can enhance a web page design and provide more information for the viewer both easily and efficiently. You can use them to show the main points of your website and showcase inspirational imagery.

    The fact that there are so many different Jquery image sliders and plugins helps designers produce new and creative websites which are both visually appealing and easy to use. Thanks for sharing.

    -1
    • Dainis Graveris

      Tuesday, June 19th, 2012 05:27

      3

      Daniel, that’s right! Also clients usually will also love those fancy slider effects on their sites too! And will be impressed to see such effects in your own portfolio! Thanks for stopping by!

      0
  • Gvido

    Monday, June 18th, 2012 16:16

    1

    This is just in time for my project! Thx!

    +2
    • Dainis Graveris

      Wednesday, June 20th, 2012 14:24

      12

      Gvido? What a big surprise to see you hanging out here hehe! What kind of project is it? :)

      0
      • Gvido

        Friday, June 22nd, 2012 13:57

        16

        I check regularly here :)
        I’m creating page for Spa Salon, 1st page for me :D

        +1
        • Dainis Graveris

          Wednesday, June 27th, 2012 13:17

          21

          Oh nice, don’t forget to reach me out on FB to share your first outcome! :)

          -1
          • Gvido

            Wednesday, June 27th, 2012 15:28

            22

            Of course, will inform you

            -1

Comments are closed.

54.166.123.2 - unknown - unknown - US