Image slider has been commonly used these times. By using image slider in your design you could make your website more awesome and engaging. The other advantage of using image slider is you can save space in your design because you don’t have to take an entire page to show the images (it depends on the design though).
Okay, below you’ll find some awesome tutorials about how to make an image slider with css3 and/or jQuery to help you learn how to make one. Hope this help.
Animate Panning Slideshow with jQuery
In this tutorial you’ll learn 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.
Elastic Image Slideshow with Thumbnail Preview
This tutorial will show you how to create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and you can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option.
Fullscreen Gallery with Thumbnail Flip
You will create a fullscreen gallery with jQuery in this tutorial. The idea is to have a thumbnail of the currently shown fullscreen image on the side that flips when navigating through the images. The big image will slide up or down depending where we are navigating to. The navigation controls also will be added for the mousewheel and keys. The thumbnail will have a zoom and and a fullscreen option, making the image in the background appear in fullscreen mode or as a complete image, resized to fit in the page.
Hover Slide Effect with jQuery
The main idea of the slider in this tutorial is to have an image area with several images that slide out when we hover over them, revealing other images. 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 the user click on any area, all areas will slide their images out.
Image Accordion with CSS3
In this tutorial you are going to create a CSS-only image accordion. You’ll use a nested structure and apply a technique of radio buttons and the sibling combinator in order to control the slides. Nice.
Parallax Slider with jQuery
The slider in this tutorial will make use of the parallax principle to move different backgrounds when the user slide to an image in order to create some nice perspective.
Portfolio Image Navigation with jQuery
You’ll create a portfolio image navigation template with jQuery in this tutorial. The idea is to show some portfolio items in a grouped fashion and navigate through them in all 2D ways (horizontal/vertical). Either the arrows or the little boxes below the current image can be used in order to navigate.
Responsive Image Gallery with Thumbnail Carousel
A tutorial on how to create a responsive image gallery with a thumbnail carousel using Elastislide. Inspired by Twitter’s “user gallery” and upon a request to show an integration of Elastislide, you’ll learn to implement a responsive gallery that adapts to the view-port width. The gallery will have a view switch that allows to view it with the thumbnail carousel or without.
Just FYI, in case you interested about responsive design, you can also look at our previous articles about that in here, here, here, and here.
Rotating Image Slider with jQuery
Personally, I think this is one of the most awesome tutorials in this list because the idea is unique. In the tutorial you will create an asymmetrical image slider with a little twist: when sliding the pictures you will slightly rotate them and delay the sliding of each element. The unusual shape of the slider is created by some elements placement and the use of thick borders.
Sliding Image Panels with CSS3
this tutorial will show you how to create some neat sliding image panels with CSS only. The idea is to use background images for the panels and animate them when clicking on a label. We’ll use radio buttons with labels and target the respective panels with the general sibling selector. Great tutorial!
Thumbnails Preview Slider with jQuery
In this tutorial you’ll learn about how to create and use a thumbnails preview slider with jQuery. Not an actual image slider tutorial though, but you could add a nice feature in your slider with this.