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.

Please don’t forget to subscribe to our RSS Feed or Follow us on twitter for more resources.

jQuery Slideshow/Slider Tutorials

1. A Simple jQuery Slideshow

As the first tutorial, you can take a look at this one to create a simple slideshow using jQuery, JavaScript and a bit of CSS.

Visit it

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.

Visit it

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.

Visit it

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.

Visit it

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.

Visit it

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.

Visit it

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.

Visit it

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.

Visit it

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.

Visit it

10. Making a Slideshow with jQuery

This would be another jQuery tutorial to create a slideshow. The preview above says all about itself.

Visit it

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.

Visit it

12. Simple jQuery slideshows

Just another jQuery tutorial to create a simple jQuery slideshow.

Visit it

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.

Visit it

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.

Visit it

15. jQuery Slideshow Explained

Learn how to implement a jQuert slideshow from scratch.

Visit it

jQuery Slideshow/Slider Plugins

1. Supersized jQuery Plugin

The preview above can describe the plugin’s function completely.

Visit itDemo

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

Visit it

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.

Visit it

4. Image Flow

In fact Image Flow is inspired by Apple’s cover flow. The javascript renders the cover flow effect without any noticeable flaw. Keyboard navigation (arrow keys), mouse scroll and dragging is supported. Very cool script to use.

Visit it

5. S3Slider jQuery plugin

s3Slider is a free plugin built in jQuery for cross-fading slideshow.

Visit it

6. Spacegallery – jQuery plugin

This jQuery plugin is called SpaceGallery which provides a great new visual effect for your images.

Visit it

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.

Visit it

8. EOGallery

EOGallery is a web animated slideshow gallery made with jQuery. It only uses basic jQuery functions.

Visit it

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.

Visit it

10. jQuery virtual tour

This jQuery plugin would be really amazing to have some great effects to create a virtual tour.

Visit it

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.

Visit it

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.

Visit it

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

Visit it

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

Visit it

15. Pirobox

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+

Visit it

16. Dynamic Image Gallery and Slideshow

This extremely lightweight JavaScript image gallery and slideshow script clocks in under 3kb packed and includes a number of cool features. You can also imagine that a full-featured slideshow gallery under 4kb.

Visit it

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

Visit it

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

Visit it

19. Accessible News Slider

As the author has described this jQuery plugin, Accessible News Slider is a JavaScript plugin built for the jQuery library.

Visit it

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!

Visit it

21. jQuery.slideShow

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

Visit it

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.

Visit it

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) …

Demo

Download

Related Posts