Nowadays, using jQuery effects is gettingÂ increasingly popular within web templates and if you check some of new designed themes on themeforest , you probably can’t find a popular theme without any kind of jQuery effects. One of those effects that designers use it widely is jQuery image slideshow or image gallery which can be implemented easily by lots of free jQuery slideshow plugins and tutorials featured here.
In this post,Â I’ve tried to cover both available tutorials and plugins to let learn how to create simple jQuery image sliders as well as simply use ready-to-use plugins.
jQuery Slideshow/Slider Tutorials
1. A Simple jQuery Slideshow
2. Create a Slick and Accessible Slideshow Using jQuery
This is an in-depth tutorial that help you to learn how to create a usable and web accessible slideshow widget for your websites using jQuery, HTML and CSS.
3. Building a jQuery Image Scroller
In this tutorial you will learn how to create an image scroller using jQuery and its great animation features. Although creating an image scroller is not something new, but this scroller would be different because it would be completely autonomous and will begin scrolling one the page loads.
4. Sliding Boxes and Captions with jQuery
In this jQuery tutorial you will learn how to create some sliding box animations that are based on the same basic idea. There is a div tag that essentially acts as a window where two other items of your choosing â€œpeekâ€ through.
5. Creating an Image Slider
In this jQuery tutorial the author is going to explain how to create a jQuery effect. When a holder is hovered over the top image slides down to reveal the image underneath. The author also explains how to use position absolute to float an image in the top right to show the image in new.
6. Create Beautiful jQuery slider tutorial
As a jQuery tutorial, this item would be really helpful when you need to create a beautiful jQuery sliders with image description and names.
7. Simple JQuery Image Slide Show with Semi-Transparent Caption
This jQuery tutorial would help you a simple image slide show with a semi-transparent caption. This would be really suitable to display news headlines.
8. Create a Simple Image Slide Show using jQuery
This jQuery tutorial is about creating slideshow that the number of image tags are not fixed.
9. Slide and hide section with jquery
To create a perfect jQuery effect (just as like as you are seeing in the picture above) just visit their website to read that jQuery tutorial.
10. Making a Slideshow with jQuery
This would be another jQuery tutorial to create a slideshow. The preview above says all about itself.
11. jQuery – Creating a Slideshow
Learning this jQuery tutorial helps you to create a slideshow. Also you would be able to use the slideshow to display everything you like putting in HTML.
12. Simple jQuery slideshows
Just another jQuery tutorial to create a simple jQuery slideshow.
13. Creating a Slick Auto-Playing Featured Content Slider
Amazing tutorial that allows you to have kinds of fun way to show many content in a small area.
14. How to add Slideshow to jQuery lightbox plugin
In this jQuery tutorial you will learn how to extend a jQuery lightbox plugin to have a slideshow.
15. jQuery Slideshow Explained
Learn how to implement a jQuert slideshow from scratch.
jQuery Slideshow/Slider Plugins
1. Supersized jQuery Plugin
The preview above can describe the plugin’s function completely.
2. The Easiest jQuery Plugin For Sliding Images and Content
This is an easy to use jQuery plugin for sliding contents and images. The features of this jQuery plugin are listed below:
- auto slide
- continuous sliding
- “go to first” and “go to last” button
- hiding controls
- optional wrapping markup for control buttons
- vertical sliding
- multiple sliders on one page
3. GalleryView: A jQuery Content Gallery Plugin
This jQuery plugin is called GalleryView. It aims to provide jQuery users with a flexible, attractive content gallery that is both easy to implement and a snap to customize.
4. Image Flow
5. S3Slider jQuery plugin
s3Slider is a free plugin built in jQuery for cross-fading slideshow.
6. Spacegallery – jQuery plugin
This jQuery plugin is called SpaceGallery which provides a great new visual effect for your images.
7. A ‘pro’ jQuery image slider built on a single unordered list
slideViewerPro is a fully customizable jQuery image gallery engine wich allows you to create outstanding sliding image galleries for your projects and/or interactive galleries within blog posts.
EOGallery is a web animated slideshow gallery made with jQuery. It only uses basic jQuery functions.
9. Smooth Div Scroll
This is a jQuery plugin that scrolls content horizontally left and right. This jQuery plugin is called Smotth Div Scroll. As the name of the plugin hints, scrolling is smooth. There are no visible buttons or links since the scrolling is done using hot spots within the scrollable area or via autoscrolling.
10. jQuery virtual tour
This jQuery plugin would be really amazing to have some great effects to create a virtual tour.
11. Ultimate Fade-in slideshow
Another jQuery slideshow plugin in our list. I have just listed the features below:
- Sleek fade in effect that has the current image fading over the previous one.
- Ability to display images either as an automatic or manual slideshow. In manual mode you define your own “prev/next” controls to let the user go through the slides.
- In automatic mode, slideshow can be set to stop rotating after x cycles.
- Each slide can be optionally hyperlinked.
- Each slide can have an optional description associated with it. Descriptions can either be set to show on demand (when the mouse rolls over the slide), or be always visible until explicitly dismissed.
- Persistence of last viewed slide supported, so when the user reloads the page, the slideshow resumes from the last slide.
- Slideshow automatically pauses on Mouseover.
12. homejQuery Cycle Plugin
A lightweight slideshow plugin that is called jQuery Cycle. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects.
13. Open Source Flickr Photo Gallery Using jQuery
Here Iâ€™m going to introduce to you another jQuery plugin called FlickrPhotoGallery. This is an open-source photo gallery for jQuery that allows you to dynamically pull images from a photoset in Flickr.
The main functionalities of this gallery are listed below:
a) Pulling images in from a Flickr Gallery
b) Growing or shrinking the gallery area depending on the size of the images
c) Offering a lightbox effect for small images
d) All features above can be turned off
14. A jQuery image slider built on a single unordered list
slideViewer is a lightweight (1.5Kb) jQuery plugin which allows you to instantly create an image gallery by writing just few lines of HTML such as an unordered list of images
This is another jQuery plugin we are going to feature. All features are listed below:
- The script weight has decreased by 40%, now weighs only 15KB, (9KB Minified)
- There is a choice between three different styles (shadow,white or black)
- Slideshow option
- Multiple image set option
- PngFix for Internet Explorer 6
- Keyboard navigation: Right arrow [next], Left arrow [prev], ESC [close]
- Previoue and Next buttons outside or inside the imageBox.
- Broken Link Check
- Automatic repositioning of the image in the browser window
- Browser compatibility = FireFox 2+, Opera9.5+, Chrome, Safari (Mac/Windows),IE 6+
16. Dynamic Image Gallery and Slideshow
17. Supersized â€“ Full Screen Background/Slideshow jQuery Plugin
Supersized is a full screen background/slideshow jQuery plugin with these features:
- Resizes images to fill browser while maintaining image dimension ratio
- No extra whitespace, no scrollbars â€“ the entire browser window is always filled
- Compatible in Firefox, Safari, Opera, IE7, and IE6
- Ability to cycle through images/backgrounds via slideshow
This jQuery plugin simply creates an image slideshow. The slideshow can autoplay slides, each image can have caption, navigation links: next, prev, each slide.
19. Accessible News Slider
20. Moving Boxes
Although this is another jQuery plugin in our list, but it has a big difference. The big difference here is that there are buttons to change panels and the panels zoom in and out. Fun!
Although the preview above describes all about this jQuery plugin, but to make it more clear we can say: â€œthis is a very simple and very easy to use slideshow plugin for jquery. It will automatically create a slideshow with navigation out of your image list. â€œ
22. Simple Controls Gallery
This jQuery plugin would be really useful for who wants to display images as an automatic slideshow that can be also explicitly played or paused by the user. More features are listed below:
- Displays images either as an automatic or manual slideshow, with the image faded into view over the previous. A Navigational Panel slides up when the mouse rolls over the gallery to play, pause, or step through to a specific image within the gallery.
- In automatic mode, set the number of cycles before the script stops rotating. New in v1.3
- Each slide consists of an image that can be hyperlinked.
- Each slide can have a description associated with it. When defined, a Description Panel slides down from the top of the gallery showing the description. New in v1.3
- The gallery supports persistence of the last viewed image via session cookies, so going away then coming back to the gallery calls up the last viewed image within a browser session.
23. YMslider plugin
It is a simple dynamic, light-weight (2,1K) and non-intrusive content slider jQuery plugin, fully CSS customisable (theme support) with respect of accessibility and W3C standard rules (strict xHTML valid) â€¦
43,899 total views, 15 views today