43 Brilliant Free jQuery Image Gallery/Slider Plugins (And 14 Tutorials to Make Your Own)

jQuery image galleries (also known as homepage sliders, slideshows or image carousels) have become more and more common on websites since the inception of jQuery in 2006. Designers and Photographers are especially attracted to them because they allow you to present many beautiful images in an interesting way. You can easily load up multiple images in the carousel and present them in a single position on your site without taking up too much room.

However, there are several issues with using jQuery Image Gallery/Sliders that you should be aware of before you jump the gun and add one to your homepage. They aren’t ideal for every type of website, and in some instances they could actually hurt your website.

The Problem with jQuery Image Sliders

jQuery sliders can be great for certain types of websites, but disastrous for others if you want it to rank in Google. Back in April 2010 Google announced that website speed and page load times would be factored into their algorithm. Homepage sliders add additional code to your page and slow down loading times, which is bad for SEO.

There has also been a lot of discussion about how image sliders can actually lower conversion rates for B2B sites. Studies have shown they can create what one writer calls a “megaphone effect:”

When a user lands on a page, his or her attention is drawn to the carousel because it has revolving content, alternating text, color changes, and all sorts of other attention-stealing features. It’s like grabbing a megaphone and telling users to look at the pretty images, but don’t pay any attention to the content below (even though this contains the information they want).

So why do we keep using them? Probably because customers keep asking for them. The “wow factor” of beautiful images flashing before a customers eyes can give them sensory overload.

If you find yourself in a situation where a jQuery image slider is required, then you’d better build a good one, or use a tried and tested free jQuery slider that is brilliant on all levels.


Elements of a Brilliant jQuery Image Slider

All of the examples shown here utilize a combination of the following elements listed below. Not all the galleries are perfect, but the best jQuery image gallery/sliders have the following attributes:

  • Highly Flexible and Customizable. Creating a perfect slider can be a difficult thing. There many factors to consider, like the features it needs, the layout of the site etc. Finding one that is truly customizable is extremely important so you don’t paint yourself into a corner, so to speak.
  • Light-weight with smooth interactions. Having a gallery that takes too long to load, is full of bloated code and is noticeably choppy when you try to use it totally defeats the purpose of having a gallery.
  • Fluid Width for Responsive Layouts. Almost all sliders listed here are responsive. That means it will change widths based on the width of your website. It’s the direction the web is going. Mobile use will very soon take over desktop use. If your site isn’t responsive with a fluid width slider, you’re doing it wrong.
  • Great overall design. A well designed jQuery slider plugin will look good no matter how you customize it. Each slider listed below is beautiful inside and out.

 

1. SlideMe

slideme
Why it’s brilliant:

  • It is beautiful, powerful, and customizable.
  • It’s light-weight and easy to install.
  • It has many different kinds of transition effects, paginations and callbacks.
  • It has great support and a sense of humor! Just try reporting a bug :)
  • Demo Download

 

2. Nivo Slider

nivoslider

Why it’s brilliant:

  • Nivo can be easily customized and even has a Premium WordPress plugin with even more features.
  • It has a variety of beautiful transition effects ranging from slicing and sliding to fading and folding.
  • Small, Semantic and Responsive, it is only 15kb so it has a minimal impact on page load times.
  • With approximately 3 million downloads it is arguably the most popular slider plugin out there, so it is battle tested, bug free, and comes with excellent support and documentation.
  • Demo Download

 

3. Gamma Gallery

gamma-gallery
Why it’s brilliant:

  • It provides adjustable responsive images by taking its grid layout and the full slideshow view into account.
  • It uses Masonry in a fluid mode where column numbers are defined depending on the grid containers.
  • It’s beautiful, and well documented. You can find it on Github licensed under the MIT License.
  • Demo Download

 

4. Unslider

Unslider
Why it’s brilliant:

  • Has keyboard support so users can cycle through photos with left and right arrow keys.
  • It’s been extensively tested and falls back very nicely to make it cross-browser compatible.
  • Responsive and touch support compatible for mobile devices.
  • Easy to use and customize right out of the box.
  • Demo Download

 

5. bxSlider

bxslider
Why it’s brilliant:

  • Fully responsive with built-in touch support.
  • Slides can contain images, video, or HTML content, and also offers horizontal, vertical, and fade modes.
  • Easy to use with simple 3-step installation instructions.
  • Small file size allows for faster load times.
  • Demo Download

 

6. Slicebox Revised

slicebox
Why it’s brilliant:

  • Has the “wow” factor. This slider takes the typical 2D slider visual a step further and presents images in a 3D effect for added depth and visual interest.
  • Customizable with multiple slider transition options.
  • Revised version includes separate containers for the image description for better SEO practices.
  • Licensed under the MIT License on Github.
  • Fully responsive
  • Demo Download

 

7. Juicy Slider

juicyslider
Why it’s brilliant:

  • Lightweight and fully responsive.
  • Automatically adjusts image size so it’s compatible with almost all browsers.
  • Open-sourced. Licensed under the MIT license.
  • Fully customizable with various effects, masks and other options.
  • Demo Download

 

8. jimpress.js

jmpressjs
Why it’s brilliant:

  • 3D transitions presents images and content in a soft, unique effect.
  • Offers multiple layout options to fit a variety of site design.
  • Fully responsive design.
  • Has on-site tutorial with easy-to-follow installation instructions.
  • Demo Download

 

9. Blueberry

blueberry
Why it’s brilliant:

  • Fully responsive design.
  • Clean minimalist design allows for easy integration into your existing design.
  • Allows customization for various elements such as speed, hover function, etc.
  • Open source project released under GPL v3 license.
  • Demo Download

 

10. zAccordion

zAccordion
Why it’s brilliant:

  • Unique accordion “slide and pop” effect grabs viewers’ attention and makes this slider to stand out from the rest.
  • Tried and true code base has been thoroughly tested and updated to fit today’s technological needs.
  • Touch friendly, and responsive design renders properly in any desktop browser size and on mobile devices.
  • It has great support with rapid response times to inquiries.
  • Demo Download

 

11. Pikachoose

pikachoose
Why it’s brilliant:

  • It’s lightweight and easily to install and customize.
  • Has several nice design options to choose from.
  • Latest version includes API hooks for integrating lightboxes and other useful tools.
  • Demo Download

 

12. Galleria

galleria
Why it’s brilliant:

  • Free and open source. Released under the MIT license, so there are basically no restrictions on usage.
  • Fully responsive design with touch support.
  • Installs easily with a single line of code.
  • Includes web app that allows you to upload, preview, and publish high quality images quickly and easily.
  • All images are cloud hosted by Galleria.
  • Demo Download

 

13. Windy

windy
Why it’s brilliant:

  • Unique fly away effect is eye-catching and beautiful.
  • Allows for displaying several images in one slider, many more than the typical jQuery plugin allows.
  • On-site tutorial provides easy-to-follow installation instructions.
  • Has multiple display options to choose from so as to fit horizontal and vertical image displays.
  • Demo Download

 

14. Parallax Slider

ParallaxSlider
Why it’s brilliant:

  • Multiple visual layers gives your art framework added depth.
  • In-depth tutorial walks you through installation step by step.
  • Easily customizable. Has multiple backgrounds to choose from, and options for setting speed, animation, rotation effect, and more.
  • Demo Download

 

15. Rhino Slider

rhinoslider
Why it’s brilliant:

  • Extremely flexible and customizable.
  • Large variety of styles and effects.
  • Can be controlled with keyboard arrow keys.
  • Can apply all effects to not only images, but HTML elements too.
  • Demo & Download

 

16. Slippry

slippry
Why it’s brilliant:

  • Responsive and lightweight.
  • Modern code (HTML5 + CSS3) but still downgrades gracefully.
  • Beautifully simplistic yet customizable.
  • Demo Download

 

17. Camera Slideshow

camera
Why it’s brilliant:

  • Clean and simple presentation of images and text.
  • Responsive with multiple transition effects.
  • Lots of options to customize anything you want.
  • Demo Download

 

18. jQuery Slider Shock

jqueryslidershock
Why it’s brilliant:

  • Lots of features and fun transition effects to choose from.
  • Fully responsive, and mobile ready (premium).
  • Supports images and videos from YouTube playlists, RSS Feeds, Twitter Feeds, Flickr and Instagram images.
  • Demo & Download

 

19. Slick

slick
Why it’s brilliant:

  • Fully accessible with arrow key navigation.
  • Infinite looping and swipe enabled (or disabled if you prefer).
  • Fully responsive and scales with its container.
  • Has Autoplay, dots, arrows and callbacks.
  • Demo Download

 

20. Crafty Slide

craftyslide
Why it’s brilliant:

  • Extremely simple and lightweight (2kb) slideshow.
  • Options to set custom width, height, fadetime and delay.
  • You can select whether to display pagination or not.
  • Demo Download

 

21. Flux Slider

fluxslider
Why it’s brilliant:

  • Utilises the newer, more powerful CSS3 animations yet still compatible with both jQuery & Zepto.js and supports more than just WebKit browsers.
  • Code and docs available on Github for additional support.
  • 15 cool 2D and 3D transitions out of the box.
  • Demo & Download

 

22. Basic Slider

basicslider
Why it’s brilliant:

  • Simple and lightweight so it can be easily customizable to suit your needs.
  • Code and docs available on Github for additional support.
  • Change to v1.3 offer responsive functionality.
  • Demo Download

 

23. Wow Slider

wowslider
Why it’s brilliant:

  • Point-and-click editing for non-coders.
  • Drag-n-drop images for ease of use.
  • 25 languages in the interface.
  • Add logo or watermark to slides to prevent image theft.
  • Demo Download

 

24. EGrappler Full Screen Responsive Slider

EGrappler
Why it’s brilliant:

  • Fully responsive and adjustable.
  • Offers full screen images.
  • Lightweight.
  • Demo & Download

 

25. Flex Slider

flexslider
Why it’s brilliant:

  • Simple, semantic markup.
  • Horizontal/vertical slide and fade animations.
  • Multiple slider support and callback API.
  • Hardware accelerated touch swipe support.
  • Demo Download

 

26. jQuery Slider2

jqueryslider2
Why it’s brilliant:

  • Small, simple and lightweight yet very powerful.
  • Works on all main browsers.
  • Lots of customizable features like autoplay, wait times, randomize, etc.
  • Demo & Download

 

27. jQuery Blinds

blinds
Why it’s brilliant:

  • Smooth animated transitions
  • Customizable animation orchestration
  • Compatible down to IE 6
  • Demo Download

 

28. AnythingSlider

anythingslider
Why it’s brilliant:

  • Slider panels can be any type of HTML content.
  • Multiple sliders allowable per-page.
  • Themes can be applied to individual sliders.
  • Responsive and lightweight.
  • Optional Video extension allows video to pause playing when not in view and resume when in view (if files are hosted on the web). This currently works for YouTube, Vimeo and HTML5 video.
  • Demo Download

 

29. BlogSlideShow

blogslideshow
Why it’s brilliant:

  • Designed specifically for blogs.
  • Comes with several nice transition effects right out of the box.
  • Very lightweight and easy to use.
  • Demo Download

 

30. Sequence

sliding-horizontal-parallax
Why it’s brilliant:

  • Moves multiple elements at the same time to create a very cool parallax effect.
  • Touch swiping and tapping supported to allow for navigation between frames.
  • Works on all modern browsers and is easily modifiable.
  • Demo Download

 

31. ThreeSixty Slider

threesixty
Why it’s brilliant:

  • Great for e-commerce to help customers look at products in detail.
  • Lightweight and fully customizable with lots of options out of the box.
  • Supports all major browsers including IE 6.
  • Demo Download

 

32. Adaptor

adaptor
Why it’s brilliant:

  • Lightweight with cool 3D rotation effects yet falls back gracefully to simple fade transitions on non-webkit browsers.
  • Excellent detailed documents and support on Github.
  • All 2D slide transitions have been tested in IE 6 and all other modern browsers.
  • Demo Download

 

33. Circular Content Carousel

circularcontentcarousel
Why it’s brilliant:

  • Beautifully simple design and very lightweight.
  • Images slide infinitely circular (hence the name).
  • Additional unique feature: Click on “more” to reveal another content area and move the respective item to the left.
  • Demo Download

 

34. Minimit Gallery

minimit
Why it’s brilliant:

  • A library agnostic javascript plugin, built for advanced frontend developers.
  • Helps you spend less time during set up, and more time coding the animations.
  • Very customizable and lightweight.
  • Demo & Download

 

35. ResponsiveSlides.js

responsiveslides
Why it’s brilliant:

  • Small file size, 1.4kb minified and gzipped.
  • Fully responsive.
  • Compatible with all major web browsers including IE6+
  • Customizable. Options include pagination, controls, slides, etc.
  • Demo Download

 

36. Sequence

sequence
Why it’s brilliant:

  • Unlike any other jQuery slider! Allows you to move, scale, rotate, and flip individual elements within the slider frame.
  • Responsive with touch support.
  • CSS3 transitions offer a smoother and more efficient user experience
  • Supported in all modern web browsers; plus includes a fallback theme for the more “historical” web browsers around.
  • Customizable with 40+ options available.
  • Demo Download

 

37. Fotorama

fotorama

Why it’s brilliant:

  • Responsive with touch support.
  • Out of the box ready for use.
  • Easy to install by copying and pasting code snippet. Also offers plugins for WordPress and Ruby on Rails.
  • Demo Download

 

38. Hashslider

hashsliderv2
Why it’s brilliant:

  • Direct links to slider position via hashtags on window locations
  • Lightweight and easily to install
  • Supports large quantity of slides
  • Fully responsive and customizable
  • Demo & Download

 

39. ayaSlider

ayaslider
Why it’s brilliant:

  • Very flexible! Can embed and/or animate any HTML element
  • Customizable. No predefined style sheet.
  • Responsive design
  • Licensed under the MIT license.
  • Demo Download

 

40. Awkward Showcase

awkwardshowcase
Why it’s brilliant:

  • The kid with the glasses in that demo photo is epic!
  • Supports more than just images. Can include captions, tooltips, video, and more.
  • Can also enable thumbnails, activate dynamic height and more.
  • Demo Download

 

41. jQuery Immersive Slider

immersive
Why it’s brilliant:

  • Sleek design! Background images transition along with viewing slide for a fully immersing user experience.
  • Easy to install. Just copy and paste code snippets.
  • Versatile use. Can include captions along with images.
  • Demo Download

 

42. Really Simple Slideshow

reallysimple
Why it’s brilliant:

  • Images are loaded dynamically as each one is required, allowing for larger slideshows without having to pre-load lots of images at a time.
  • Very customizable and lightweight.
  • Detailed set-up documentation and support.
  • Demo Download

 

43. Sudo Slider

sudoslider
Why it’s brilliant:

  • Can load any HTML content as well as AJAX content.
  • Supports IE6+
  • Fully responsive and lightweight.
  • Demo Download

 

15 Excellent jQuery Image Gallery/Slideshow Tutorials to Learn How to Build Your Own

Ready to create your own? The first thing you might be asking yourself is “Steven, why would I create my own if there are 43 perfectly good and free jQuery image gallery sliders list above?” It’s a valid question!

While all the demos listed above are high quality and easy to use, it’s always best to really understand how they work. It also comes in handy if you ever want to customize them. Often times it’s harder to edit someone else’s code, but if you write the code yourself, you know where everything is. Plus, who doesn’t like getting down and dirty in some code?

I’ve spend a good few hours crawling the far corners of the web to find some decent tutorials for you. While this list isn’t exhaustive, it is what I believe to be some of the best tutorials online right now for learning how to build your own gallery/slider. Hopefully it saves you some time. Please feel free to bookmark this page so you can come back later if you aren’t ready to learn right now. I’ll do my best to keep it updated monthly.

 

1. Create an Image Rotator with Description (CSS/jQuery)

tut1

Why it’s excellent:
This tutorial by Jake Rocheleau is a re-make of a popular tutorial originally written by Soh Tanaka. Jake has updated the code used in the tutorial to include some new user-requested features.

View Tutorial

 

2. How to Create a Simple Multi-Item Slider

tut2

Why it’s excellent:
This tutorial from Mary Lou from Codrops teaches the process to create an awesome slider that is great for displaying products on an e-commerce site.

View Tutorial

 

3. How to Create a Touch-Enabled Slider with SwipeJS and jQuery

tut5

Why it’s excellent:
Thoriq Firdaus shows how to create a slider that will be user-friendly for visitors on touch devices. It’s easy to follow and very detailed.

View Tutorial

 

4. How to Create a Cool Rotating Image Slider with jQuery

tut9

Why it’s excellent:
Again, Mary Lou from Codrops shows how to create a unique slider with a twist in this tutorial. The images slightly rotate when sliding which adds a really neat, unique effect!

View Tutorial

 

5. How to Create a Parallax Slider with jQuery

tut6

Why it’s excellent:
Remember the cool free parallax slider from number 14? Well it comes with a tutorial! The queen of jQuery sliders again shows how to create a slider with a parallax effect to slide different backgrounds and give a 3D depth of field effect.

View Tutorial

 

6. How to Build a Triple Panel Image Slider

tut4

Why it’s excellent:
Creates a very unique effect. Again, Mary Lou teaches us how to create these cool 3D effects in a very simple yet powerful tutorial that uses CSS 3D transforms with perspective and CSS transitions.

View Tutorial

 

7. How to Create an Image Slider using jQuery and CSS3

tut7

Why it’s excellent:
Valeriu Timbuc has done an excellent job creating this tutorial for DesignModo. It’s clean and easy to follow and only has an estimated completion time of 30 minutes for intermediate developers. When you’re done you’ll have a beautiful and simple jQuery and CSS3 image slider and the knowledge of how to customize it to fit your needs.

View Tutorial

 

8. Create a Responsive Image Slider in jQuery and CSS3

tut8

Why it’s excellent:
Again, Valeriu Timbuc shows us in detail how to code a responsive image slider using the DesignModo Impressionist UI. He also uses the FlexSlider plugin for the functionality and styles it using CSS3. One of the better tutorials we’ve found!

View Tutorial

 

9. How to Build a Sliding Feature Slideshow with jQuery

tut10

Why it’s excellent:
Chris Spooner does an excellent job showing us exactly how he created this jQuery slideshow by breaking out the HTML structure, CSS styling, and jQuery functionality. Very easy to understand and follow. When you’re done you’ll have an elegant and lightweight slideshow and maybe that green lambo to drive around town :)

View Tutorial

 

Honorable Mentions

Still not satisfied with the tutorials listed above? Here are 5 more tutorials that we highly suggest you try to expand your jQuery and CSS3 knowledge:

10. http://strongloop.com/strongblog/build-a-slideshow-with-jquery-from-scratch/
11. http://kimjoyfox.com/creating-a-jquery-slideshow-from-scratch/
12. http://paulmason.name/item/simple-jquery-carousel-slider-tutorial
13. http://tympanus.net/codrops/2012/02/06/3d-gallery-with-css3-and-jquery/
14. http://www.queness.com/post/3036/create-a-custom-jquery-image-gallery-with-jcarousel

 

What Did We Miss?

While I think I’ve covered some of the best, I’m sure there are plenty more that need some attention. Please feel free to leave a comment below so I can update this post and keep it up to date.

If you’ve made it this far, then I thank you for your patronage! As more and more jQuery Image Gallery/Slider tutorials and plugins get created, I hope to revisit this post about once per month. Again, please add this page to your bookmarks, and let me know if you have any questions or suggestions in the comments below.

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.

17 Responses

Comments are now closed on this post.

Close