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

In this educational we will create a Slider with “Nivo Slider jQuery Script” and CSS3. We will use a “Nivo Slider jQuery Script” since it’s a absolute apparatus and it’s free. This book has 16 transition effects, it’s simple, stretchable and have a lot of some-more good features. You can use it roughly anywhere and for roughly any kind of project, including personal and blurb websites and themes we make. In this educational we will formula the Image Slider that we can find in Futurico UI Pro done by Vladimir Kudinov.

Step 1 – Basic HTML Markup

First we need to download a Nivo Slider jQuery chronicle here. You usually need dual files from a container we have downloaded: “nivo-slider.css” and “jquery.nivo.slider.pack.js”.

Then emanate a simple HTML Markup and supplement a “Nivo Slider” CSS and JS files. You also need to couple to a jQuery library regulating a final chronicle hosted by Google or if we wish we can horde it on your possess server, it’s your choice.

To bucket a nivo slider we need to supplement some some-more lines of formula before a /body shutting tag. We also need to set some options to make a controls visible, change a heading opacity and altered a prior and subsequent slip content to arrows. You can find a full options list here.

Step 2 – Slider HTML Markup

Firs we need to emanate a div with a category “slider-wrapper” and “futurico-theme”. Then emanate a div with id “slider” and a category “nivoSlider”. For any slip we will emanate a img.

Step 3 – Slider Layout

We will emanate a 300px breadth and 180px tallness slider. As we will supplement 5px stuffing we need to subtract 10px from a breadth and from a height. We will also set a credentials tone and a dull corners.

Step 4 – Slider Controls

Now we will character the slider controls. We will start by positioning a controls during a bottom and centering them. If we will have some-more than 4 slides we will have to change a “left” value in sequence to core a controls.

We will emanate a round for any slide. To character it we’ll supplement a credentials color, some shadows and dull corners to make a circle. To censor a “1,2,3,4” numeration we will supplement a content score with a disastrous value.

For a active slip we’ll supplement a immature slope and change a shadows.

Step 5 – Next and Previous Slide

To character a subsequent and prior slip controls we will position it during a core and supplement some simple CSS styles (font-family, font-size, color, etc.).

Step 6 – Captions HTML Markup

To emanate a captions we need to emanate a div with a category “nivo-html-caption” and a pointless id. To couple a heading to a particular slip supplement a “title” to a img with a same name as a heading id.

Step 7 – Caption Style

To character a captions we will change a content tone a rise family and rise size. We will also use a same immature slope that we have used before.


That’s it! We have combined a absolute and pleasing slider. In this educational we focused on a styling of a slider and a “Nivo Slider Script” tacked caring of a functionality. Don’t forget to leave some feedback in a comments and allow us.

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

Leave a Comment

Comments are moderated. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!

2 + = eight