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 Gallery/Slider Tutorials:
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.
This tutorial from Mary Lou teaches the process to create an awesome slider that is great for displaying products or other items.
In this tutorial from Mary Lou you’ll learn how to create a slider with a cool 3D effect.
This is a very in-depth tutorial by Patrick Kunka that is a great starting point for anyone looking to code their own slider.
Thoriq Firdaus shows how to create a slider that will be user-friendly for visitors on touch devices.
In this tutorial Mary Lou shows how to create a slider with a parallax effect to slide different backgrounds.
Mary Lou shows how to create a unique slider with a twist in this tutorial. The images slightly rotate when sliding.
This tutorial by Valeriu Timbuc shows how to create a basic slider with jQuery and CSS3.
Another tutorial from Valeriu Timbuc, this one explains the process for creating a responsive slider.
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.
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.
jQuery Image Gallery/Slider Plugins:
This is an experimental 3D gallery that uses CSS3 3D transitions to create a unique effect.
Gamma Gallery is an experimental responsive gallery.
SlideMe is a responsive full-screen slideshow plugin. It uses CSS3 and is customizable.
StackSlider is an experimental slider that flips through the images in 3D.
Perhaps the most popular slider plugin out there, Nivo can be easily customized and even comes as a WordPress plugin (premium).
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.
bxSlider a responsive slider with advanced swipe/touch support. It uses CSS transitions for slide animations.
Slicebox uses a cool 3D slicing effect during slide transitions.
This plugin uses some cool and unique 3D effects during the transition of slides.
Royal Slider is a powerful image gallery and slider plugin. It is responsive, touch-friendly, and customizable.
Juicy Slider is a responsive and lightweight slider plugin.
SlideJS is a responsive slider plugin with touch support and CSS3 transitions.
Flexslider is a responsive slider plugin from WooThemes.
Blueberry is an experimental open-source slider for responsive websites.
For more resources please see:
- 10 Helpful Resources for Testing Responsive Web Design
- Popular Design Trends for Responsive Navigation
- 13 Resources to Design for Bootstrap
- 15 jQuery Carousel Plugins
Published November 12th, 2013 by Steven Snell