Over a million developers have joined DZone.

50 Useful jQuery Slider Plugins and Tutorials

· Web Dev Zone
jQuery is very popular. almost every website has implemented at least one jQuery plugin. jQuery image sliders and galleries are useful for any other type of site for displaying images and photos. Implementing jQuery slider in your site will definitely count as a big plus so don’t waste your time looking for them on your own. If there is a jQuery slider that you need, you’ll find it here. You also have the opportunity to follow a tutorial that explains how to develop and create Beautiful jQuery sliders tutorials.

jQuery plugins

1. s3Slider jQuery plugin

The s3Slider jQuery plugin is made by example of jd`s smooth slide show script. I needed something like that for jQuery (for my web site kruskica.net). Since i didnt find it after a small research i decided to build it by my self.

jquery slider

View Live Demo

2. Galleria

Galleria is a JavaScript image gallery framework built on top of the jQuery library. The aim is to simplify the process of creating professional image galleries for the web and mobile devices. jquery slider

View Live Demo

3. slideViewer

slideViewer checks for the number of images within your list, and dinamically creates a set of links to command (slide) you pictures. Also, clicking on each image will make the gallery slide forward or backward, depending on the area you are clicking (eg: clicking the left part of a picture will move the slides backward, and viceversa for the right part of the picture).jquery slider

View Live Demo

4. AnythingSlider jQuery Plugin

This new AnythingSlider is an attempt at bringing together the functionality of all of those previous sliders and adding new features. In other words, to create a really "full featured" slider that could be widely useful. This is the first time (on CSS-Tricks) that one of these sliders is an actual plugin as well, which should make implementing it and customizing it much easier.jquery slider

View Live Demo

5. Image Flow 0.9

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.

jquery slider

View Live Demo

6. Easy Slider 1.7

I got a lot of emails and feedback about my easySlider plugin, thank you all for that. However, I have to apologize to all of you who sent emails asking for a little help with implementation or small bug fixes. I simply don't have the time to answer all of your emails. I wish I do.

jquery slider

View Live Demo

7. Supersized – Full Screen Background/Slideshow jQuery Plugin

jquery slider

View Live Demo

8. CrossSlide

CrossSlide is a jQuery plugin implementing in 2kB1 of Javascript code some common slide-show animations, traditionally only available via Adobe Flash™ or other proprietary plugins. CrossSlide builds upon jQuery's animation facility, so it is as portable across browsers as jQuery itself (that is, a lot!) jquery slider

View Live Demo

9. Slider Gallery

This ‘product slider’ is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items. Simple stuff.jquery slider

View Live Demo

10. Coda Slider Effect

jquery slider

View Live Demo

11. Moving Boxes

We've been down the jQuery "sliders" path a few times before. Once for the Auto-Playing Featured Content Slider and again for the Start/Stop slider.jquery slider

View Live Demo

12. JCoverflip

jCoverflip has been developed to enable fast and granular customization of the look and feel and feature set. jquery slider

View Live Demo

13. COIN SLIDER

jquery slider

View Live Demo

14. Slides

Slides is a crazy simple slideshow plugin for jQuery. With features like looping, auto play, fade or slide transition effects, crossfading, image preloading, and auto generated pagination. jquery slider

View Live Demo

15. Nivo Slider

jquery slider

View Live Demo

16. Avia Slider jQuery Plugin

jquery slider

View Live Demo

17. jQuery.popeye 2.0

jQuery.popeye is an advanced image gallery script built on the JavaScript library jQuery. Use it to save space when displaying a collection of images and offer your users a nice and elegant way to show a big version of your images without leaving the page flow. jquery slider

View Live Demo

18. jqFancyTransitions

jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.

jquery slider

View Live Demo

19. slideViewerPro 1.0

slideViewerPro is a fully customizable jQuery image gallery engine wich allows to create outstanding sliding image galleries for your projects and/or interactive galleries within blog posts. jquery slider

View Live Demo

20. jQuery Blinds

jquery slider

View Live Demo

Tutorials

21. Creating an Image Rotator

An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery. Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your own from scratch. jquery slider

View Live Demo

 

22. Sliding Boxes and Captions with jQuery All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through. jquery slider

View Live Demo

23. Using the Wonderful jFlow Plugin

It seems that the obsession of the web design industry right now is the ability to create a “featured section”. While it once may have required a great deal of skill, that is no longer the case. In this screencast, I’ll show you how to easily create a scrollable featured section using one of Theme Forest’s popular themes as a reference. Let’s get into it! jquery slider

View Live Demo

 

24. Create Featured Content Slider Using jQuery UI Showing off the best content of your website or blog in a nice intuitive way will surely catch more eyeballs. Using an auto-playing content slider is the one of techniques to show your featured content. It saves you space and makes for a better user experience, and if you add a pinch of eye candy to it, then there’s no looking back. jquery slider

View Live Demo

25. Step By Step To Create Content Slider using jFlow, A Minimalist jQuery Plugin

Today, i am going to provide a tutorial on using jFlow, a minimalist jQuery plugin to create a content slider. Readers are required to have basic XHTML/CSS and JavaScript skills. I will provide a download link after this tutorial. This is the first tutorial post on WebDesignBooth, and i will write more tutorials in future.jquery slider

View Live Demo

26. Create a Custom jQuery Image Gallery with jCarousel

Alright fellow web designers and developers. We are going to do something a little bit more hardcore this time. There are heaps of jQuery plugins out there, but it's hard to find something that suit us. So, this tutorial will teach you how to be creative and create a customize plugin. jquery slider

View Live Demo

27. Fancy Sliding Form with jQuery

Today we are going to create a fancy sliding form that shows some validation feedback to the user after each step. This form saves a lot of space and is easy to access – it basically works like a slide show, just that we have fieldsets of a form instead of images. jquery slider

View Live Demo

28. Automatic Image Slider w/ CSS & jQuery

With the release of the iPad and its lack of support for flash, it has stirred up a lot of debates regarding the future of flash. With this in mind, I believe it is wise to build simple widgets like the image slider using HTML/CSS/Javascript, and leave more interactive applications for flash if needed. The html based image slider will have its benefits with SEO and will also degrade gracefully for those w/out js. jquery slider

View Live Demo

29. Colorful Sliders With jQuery & CSS3

In this tutorial we are using jQuery and the new transformation features brought by CSS3 to create a three dimensional dynamic slider effect. The techniques presented here – for creating sliders, and CSS dynamic resizable bars, can be used together or in part for powering all sorts of jQuery goodness. jquery slider

View Live Demo

30. How to Create a Simple iTunes-like Slider

When space is at a premium, making use of sliders is the optimal way to present information. Today, we’ll take a look at how to create a slider similar to the one used in the iTunes store. jquery slider

View Live Demo

31. Making a Mosaic Slideshow With jQuery & CSS

When designing a product page, it is often necessary to present a number of images in a succession, also known as a slideshow. With the raise of the jQuery library and its numerous plugins, there is an abundance of ready-made solutions which address this problem. However, to make a lasting impression to your visitors, you need to present them with something they have not seen before. jquery slider

View Live Demo

32. Multiple Image Cross Fade

Today we learn how to fade list of images through each other in continuous loop. We will also add captions and tooltips to make it more usable. This simple effect is ideal for portfolio websites, galleries or magazines where images need to be seen. jquery slider

View Live Demo

33. Slide Thumbs

In this post I want to explain how to turn old boring image viewer into a nice-looking one with jQuery. It's simple just using some lines of java-script code. Implement this and enrich animation features to your web projects.

jquery slider

View Live Demo

34. Creating a Rotating Billboard System with jQuery and CSS

In this tutorial we will use some images, CSS and jQuery to create the effect of a rotating billboard with two ads. The idea is to make one set of image slices disappear while another one (the other ad) appear. We will decrease the width of each disappearing slice and increase the width of each appearing slice. This will give the effect of rotating slices, just like in a rotating billboard system. jquery slider

View Live Demo

35. Parallax Slider with jQuery

Happy New Year! We will kick start 2011 with a vibrant image slider tutorial. We will make use of the parallax principle to move different backgrounds when we slide to an image in order to create some nice perspective. This will give a great depth to the whole slider when it’s in motion. jquery slider

View Live Demo

36. JQuery Expand Stacked Images Using Slider

This time the post will show how to expand the stacked images with jquery, for the illustration, there is a stack of images that have very small margin between each image, and the slider have a function to make the margin larger, really easy to imagine right? Now to make it look stacked I’m using jquery plugin, the rotate3Di and of course the JQuery UI slider jquery slider

View Live Demo

37. Thumbnails Preview Slider with jQuery

In this tutorial we will show you how to create and use a thumbnails preview slider with jQuery. Since we got a lot of requests to show how to make the preview slider work separately from the full image view, we decided to make a tutorial on how to use the little thumbnails preview part only. jquery slider

View Live Demo

38. How to Make an Elegant Sliding Image Gallery with jQuery

There are a lot of jQuery image galleries out there, some of which are quite lovely (Galleria springs to mind). However, I've yet to discover a really nice-looking, full-window sliding image gallery that is simple and elegant, and that also shows off the photos to good effect. So I decided to write one! jquery slider

View Live Demo

39. Design An Elegant Featured Content Slider for WordPress

In this tutorial, we’ll create an elegant featured content slider for WordPress like the one featured on http://www.fuseboxtheatre.com. jquery slider

View Live Demo

40. Making A Slick Content Slider

Web masters constantly search for ways to optimize the way content is presented on their sites. With the advent of terms like “above the fold” it is ever so important to provide eye-catching and functional user interfaces.

jquery slider

View Live Demo

41. Build a Content Slider with jQuery

There are a ton of tutorials already out there about creating content sliders with jQuery. So why bother writing another one? While I don’t think that the existing tutorials are incorrect, bad, or otherwise unacceptable, I haven’t found one that met my needs. jquery slider

View Live Demo

42. CSS and Jquery – Creating an Image Slider

Welcome to my first CSS tutorial in a long time. I"ve been working on various other projects and university work recently but want to get back to being as active as possible on the site. In this tutorial I am actually going to be explaining how to do something which I created for one of my other projects. Basically you are going to create a jquery effect. When a holder is hovered over the top image slides down to reveal the image underneath. I will also explain how to use position absolute to float an image in the top right to show the image is new.

jquery slider

View Live Demo

43. A Beautiful Apple-style Slideshow Gallery With CSS & jQuery

When speaking about design, there is one company that is impossible to go without. Apple values design – being a new product, a fancy catalog or their website – there is always something to admire. jquery slider

View Live Demo

And more…

44. How to Make Auto-Advancing Slideshows

The tutorial is on how to make the HTML5 Slideshow auto advance with a few lines of jQuery.

51

View Live Demo

45. Easy Slider

Easy Slider (as I call this plugin) enables images or any content to slide horizontally or vertically on click. It is configurable with css alone. So, basically you link to plugin file, set the content up and style it with css.

52

View Live Demo

46. Simple jQuery Slideshow

A simple tutorial, and it shows us how to create a really simple jquery photo slideshow.

54

View Live Demo

47. JQuery Image Gallery with Captions and Auto Play/Pause Rotation

An awesome jquery gallery which is transparent, fixed on screen, autoplay on/off buttons and css3 stylized gallery.

55

View Live Demo

48. JQuery Based Flipped Image Gallery with Bounce Effects

A simple jQuery based flipped image gallery. On hover the images will expand.

56

View Live Demo

 

49. Awesome jQuery Image Gallery Plugin(Thumbox)

 

Browse the images via mini-gallery.Display images description.Effects for input and output images.Keyboard navigation.Navigation with the mouse wheel.

58

View Live Demo

50. Galileory jQ(All-In-Box jQuery Image Gallery)

All images placed into a single box which can be positioned, sized and stretched however you wish. It is totaly client relative, compatible with all CMS and can be integrated into any website or blog.

59

View Live Demo


Reference:http://webdesign14.com/100-useful-jquery-slider-plugins-tutorials/
Topics:

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}