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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

Why it’s brilliant:

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


17. Camera Slideshow

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

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

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

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

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

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

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

Why it’s brilliant:

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


25. Flex Slider

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

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.


27. jQuery Blinds

Why it’s brilliant:

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


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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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)


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


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


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


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


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


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


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


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


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.

18 Responses

Comments are now closed on this post.