25 jQuery Image Gallery/Slider Tutorials and Plugins

This post was originally published several years ago. As technology and trends have changed over the years, the content of the post became outdated. So we’ve updated the post with all new examples that will be more relevant for modern design and development.

jQuery image galleries and sliders are very common on portfolio sites and are also useful for any other type of site for displaying images and photos. Fortunately, adding a jQuery gallery does not have to be difficult, even if you don’t have much experience with JavaScript and jQuery. In this post we’ll see tutorials and plugins that can provide you with the resources that you need to get a gallery of slider on your site.

jQuery Image Gallery/Slider Tutorials:

Create an Image Rotator with Description (CSS/jQuery) 

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.

Create an Image Rotator with Description (CSS/jQuery)

How to Create a Simple Multi-Item Slider

This tutorial from Mary Lou teaches the process to create an awesome slider that is great for displaying products or other items.

How to Create a Simple Multi-Item Slider

Triple Panel Image Slider

In this tutorial from Mary Lou you’ll learn how to create a slider with a cool 3D effect.

Triple Panel Image Slider

Building a jQuery Slideshow Plugin from Scratch

This is a very in-depth tutorial by Patrick Kunka that is a great starting point for anyone looking to code their own slider.

Building a jQuery Slideshow Plugin from Scratch

Creating Touch-Enabled Slider with SwipeJS and jQuery

Thoriq Firdaus shows how to create a slider that will be user-friendly for visitors on touch devices.

Creating Touch-Enabled Slider with SwipeJS and jQuery

Parallax Slider with jQuery

In this tutorial Mary Lou shows how to create a slider with a parallax effect to slide different backgrounds.

Parallax Slider with jQuery

Rotating Image Slider with jQuery

Mary Lou shows how to create a unique slider with a twist in this tutorial. The images slightly rotate when sliding.

Rotating Image Slider with jQuery

How to Create an Image Slider Using jQuery and CSS3

This tutorial by Valeriu Timbuc shows how to create a basic slider with jQuery and CSS3.

How to Create an Image Slider Using jQuery and CSS3

How to Create a Responsive Image Slider in jQuery and CSS3

Another tutorial from Valeriu Timbuc, this one explains the process for creating a responsive slider.

How to Create a Responsive Image Slider in jQuery and CSS3

Simple jQuery Carousel Slider Tutorial

Many times the best slider to use as a starting point is a basic, simple slider. This usually will make it easier to add your own customization. This tutorial by Paul Mason shows how to create a basic slider.

Simple jQuery Carousel Slider Tutorial

 

Create a Custom jQuery Image Gallery with jCarousel

This tutorial by Kevin Liew shows the process of customizing the jCarousel plugin, which can be really helpful if you’re needing to customizing an existing slider plugin for your own site.

Create a Custom jQuery Image Gallery with jCarousel

jQuery Image Gallery/Slider Plugins:

3D Gallery with CSS3 and jQuery

This is an experimental 3D gallery that uses CSS3 3D transitions to create a unique effect.

3D Gallery with CSS3 and jQuery

Gamma Gallery

Gamma Gallery is an experimental responsive gallery.

Gamma Gallery

SlideMe

SlideMe is a responsive full-screen slideshow plugin. It uses CSS3 and is customizable.

SlideMe

StackSlider

StackSlider is an experimental slider that flips through the images in 3D.

StackSlider

Nivo Slider

Perhaps the most popular slider plugin out there, Nivo can be easily customized and even comes as a WordPress plugin (premium).

Nivo Slider

Unslider

Unslider is a lightweight plugin that doesn’t have a lot of fancy effects, but it looks great and can be a good starting point.

Unslider

bxSlider

bxSlider a responsive slider with advanced swipe/touch support. It uses CSS transitions for slide animations.

bxSlider

Slicebox Revised

Slicebox uses a cool 3D slicing effect during slide transitions.

Slicebox Revised

Slideshow with jmpress.js

This plugin uses some cool and unique 3D effects during the transition of slides.

Slideshow with jmpress.js

Royal Slider

Royal Slider is a powerful image gallery and slider plugin. It is responsive, touch-friendly, and customizable.

Royal Slider

Juicy Slider

Juicy Slider is a responsive and lightweight slider plugin.

Juicy Slider

SlideJS

SlideJS is a responsive slider plugin with touch support and CSS3 transitions.

SlideJS

Flexslider

Flexslider is a responsive slider plugin from WooThemes.

Flexslider

Blueberry

Blueberry is an experimental open-source slider for responsive websites.

Blueberry

For more resources please see:

Published November 12th, 2013 by

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

Join Our Newsletter!

Subscribe to our weekly newsletter chalked full of useful tips, techniques, and design goodies. We have 20,000+ loyal readers and counting! We’ll even send you a free e-book (Freelance Designer’s Guide to Multiple Income Streams) and a $10 discount on our most popular product the Freelance Starter Kit.