A slideshow is a display of a series of chosen pictures, which is done for artistic or instructional purposes. jQuery is the most popular for creating slideshow sliders. jQuery sliders have been spotted to be commonly used in portfolio sites, corporate websites, blogs and any other type of websites to display the images in different impressive ways.
By making use of jQuery, you can easily create an image slideshow of your own, complete with previous and next navigation controls also with amazing transition effect. Here is a collection of the newest jQuery slider tutorials out there on the web. These tutorials include image sliders, content sliders and gallery sliders! With the help of these useful jQuery slider tutorials to help all you developers improve your skills! Enjoy!
If you like this collection, you might be interested in some of our older articles on HTML 5 tutorial with examples, Photoshop text effects tutorials, free wireframe tools and creative WordPress themes.
1. Hover Slide Effect with jQuery
The sliding effect will be random, i.e. the images will slide to the top or bottom, left or right, fading out or not. When we click on any area, all areas will slide their images out.
2. Creating a Slick Auto-Playing Featured Content Slider
They will exist no matter what, and this example will continue to work and be auto-play regardless if we use the thumbnail navigation or not.
3. Making a Mosaic Slideshow With jQuery & CSS
Today we are making a jQuery & CSS mosaic gallery. Mosaic, because it will feature an interesting tile transition effect when moving from one slide to another.
4. Elastic Image Slideshow with Thumbnail Preview
The slideshow will adjust automatically to its surrounding container and we can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option.
5. How to Make Auto-Advancing Slideshows
It is actually not that difficult to achieve this effect, and to demonstrate it, in this short tutorial we are going to make our HTML5 Slideshow auto advance with a few lines of jQuery.
6. Slicebox – A Fresh 3D Image Slider with Graceful Fallback
The main idea is to create three-dimensional image slices that will rotate and reveal the next image as another side of the 3d object.
7. How to Start Using jQuery Sliders in Your Designs
jQuery sliders offer a simple, elegant way to display content without giving up valuable real estate on your web page.
8. Build a Simple Image Slideshow with jQuery Cycle
By making use of the handy Cycle plugin for jQuery, we can easily create a slideshow of our own, complete with previous and next navigation controls.
9. Parallax Slider with jQuery
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.
10. JQuery Photo Slider with Semi Transparent Caption Tutorial
Image Slide Show is one of the famous components in web design and development. A lot of the websites display news headlines in an image slide show to attract viewers attention, of course, with caption/excerpt.
11. Advanced jQuery Background Image Slideshow
With the use of transparent PNG’s, some HTML, pretty nifty CSS and jQuery, we can make this technique work. Read the rest of this article to learn how to create a beautiful advanced jQuery background image slideshow.
12. A Bullet-Proof Content Viewer
We’ll build a solid core of semantic HTML, styled with some basic CSS and we’ll then use jQuery to add further enhancements in the form of transition animations.
13. Apple-style Slideshow Gallery With CSS & jQuery
Apple values design – being a new product, a fancy catalog or their website – there is always something to admire.
14. Create your own jQuery Image Slider
HTML and CSS should be doing in order to create the component before we actually create the javascript.
15. Building a jQuery Image Scroller
We’ll be working with just jQuery and a little HTML and CSS in this tutorial and should be able to run the examples without a full web server setup.
16. CrossSlide
CrossSlide is a jQuery plugin implementing in 2kB 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!)
17. Moving Boxes
Many of the concepts presented in those tutorials are the same with this slider, so I’m not going to throw a lot of source code at you this time. The big difference here is that there are buttons to change panels and the panels zoom in and out.
18. Rotating Image Slider with jQuery
In the following tutorial we will create an asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the sliding of each element.
19. How to Create a Simple iTunes-like Slider
Learn how to create a slider similar to the one used in the iTunes store by reading through this tutorial.
20. Animate Panning Slideshow with jQuery
We’ll take the makings of a classic slideshow, but use a different kind of transition to animate between slides. It may not fit every project, but diversity is always welcome in the world of web design.
jQuery image tutorials are professionally designed and with time you can improve your knowledge. I hope you will have liked these tutorials. Feel free to share your comments with us.
