How to Create an Image Slider using jQuery and CSS3 [Tutorial]

In this tutorial we will create a Slider with “Nivo Slider jQuery Script” and CSS3. We will use the “Nivo Slider jQuery Script” because it’s a powerful tool and it’s free. This script has 16 transition effects, it’s simple, flexible and have a lot of more nice features. You can use it almost anywhere and for almost any kind of project, including personal and commercial websites and themes you make. In this tutorial we will code the Image Slider that you can find in Futurico UI Pro made by Vladimir Kudinov.

Step 1 – Basic HTML Markup

First you need to download the Nivo Slider jQuery version here. You only need two files from the pack you have downloaded: “nivo-slider.css” and “jquery.nivo.slider.pack.js”.

Then create the basic HTML Markup and add the “Nivo Slider” CSS and JS files. You also need to link to the jQuery library using the last version hosted by Google or if you want you can host it on your own server, it’s your choice.

To load the nivo slider we need to add some more lines of code before the /body closing tag. We also need to set some options to make the controls visible, change the caption opacity and changed the previous and next slide text to arrows. You can find the full options list here.

Step 2 – Slider HTML Markup

Firs we need to create a div with the class “slider-wrapper” and “futurico-theme”. Then create a div with id “slider” and the class “nivoSlider”. For each slide we will create a img.

Step 3 – Slider Layout

We will create a 300px width and 180px height slider. As we will add 5px padding we need to subtract 10px from the width and from the height. We will also set the background color and the rounded corners.

Step 4 – Slider Controls

Now we will style the slider controls. We will start by positioning the controls at the bottom and centering them. If you will have more than four slides you will have to change the “left” value in order to center the controls.

We will create a circle for each slide. To style it we’ll add a background color, some shadows and rounded corners to make the circle. To hide the “1,2,3,4” numeration we will add a text indent with a negative value.

For the active slide we’ll add a green gradient and change the shadows.

Step 5 – Next and Previous Slide

To style the next and previous slide controls we will position it at the center and add some basic CSS styles (font-family, font-size, color, etc.).

Step 6 – Captions HTML Markup

To create the captions we need to create a div with a class “nivo-html-caption” and a random id. To link the caption to the respective slide add a “title” to the img with the same name as the caption id.

Step 7 – Caption Style

To style the captions we will change the text color the font family and font size. We will also use the same green gradient that we have used before.

Conclusion

That’s it! We have created a powerful and beautiful slider. In this tutorial we focused on the styling of the slider and the “Nivo Slider Script” tacked care of the functionality. Don’t forget to leave some feedback in the comments and subscribe us.

VN:F [1.9.22_1171]
Rating: 10.0/10 (1 vote cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)
How to Create an Image Slider using jQuery and CSS3 [Tutorial], 10.0 out of 10 based on 1 rating

You may also like...