MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to Create and Style the Image Slider with jQuery

We will learn how to create a beautiful slider and focus on the styling of the slider taking care of the functionality as well.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

Here we will be making use of jQuery Script for the reason that it is considered to be a very powerful language. This script has many transition effects which are very simple, flexible and have a lot of other nice features as well. We can utilize this at multiple places or rather anywhere irrespective of kind of project. This includes personal as well as commercial websites and themes that you make. With the help of this tutorial, we will learn to code the Image Slider. Let us see this step by step.

Step 1 – Basic HTML Markup

Before you begin, you are required to download the Nivo Slider jQuery version where we will just need two files from the pack: “nivo-slider.css” and “jquery.nivo.slider.pack.js”. After this, you need to create the basic HTML Markup and then incorporate the “Nivo Slider” CSS and JS files. Apart from this, you need to link to the jQuery library making use of the last version hosted by Google. You can also host it on your own server.

Listing1: Displaying the basic HTML Markup

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Slider Tutorial</title>
    <link rel="stylesheet" href="css/nivo-slider.css" media="screen">
</head>
 
<body>
 
<!-- jQuery & Nivo Slider -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.nivo.slider.pack.js"></script>
 
</body>
</html>

There is a need to incorporate some more lines of code in order to load the nivo slider. This will be done just before the closing tag. After this, set some options to make the controls visible, modify the caption opacity and then alter the previous and next slide text to arrows.

Listing 2: Adding Code before tag

<script>
    $(window).load(function() {
        $('#slider').nivoSlider({
            directionNavHide: false,
            captionOpacity: 1,
            prevText: '<',
            nextText: '>'
        });
    });
</script>

Step 2 – Slider HTML Markup

Here the very first step is to create a div with the class “slider-wrapper” as well as “futurico-theme”. Once this is done, create a div with id “slider” and the class “nivoSlider”. We will be creating a for each of the slide.

Listing 3: Displaying the Slider HTML Mark-up

<div class=”slider-wrapper futurico-theme">
    <div id="slider" class="nivoSlider">
        <img src="img/slide1.png" alt="">
        <img src="img/slide2.png" alt="">
        <img src="img/slide3.png" alt="">
        <img src="img/slide4.png" alt="">
    </div>
</div>

Step 3 – Slider Layout

Here, create a 300px width and 180px height slider. Since we will be adding 5px padding, this will make us to subtract 10px from the width as well as from the height. Also, we will set the background color and the rounded corners.

Listing 4: Displaying the Slider Layout

.futurico-theme.slider-wrapper {
    position: relative;
    width: 290px;
    height: 170px;
    margin: 0;
    padding: 5px;
 
    background: #141517;
 
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
 
.futurico-theme .nivoSlider {
    position: relative;
    width: 290px;
    height: 170px;
}
 
.futurico-theme .nivoSlider img {
    display: none;
    position: absolute;
    width: 290px;
    height: 170px;
    top: 0;
    left: 0;
}
Displaying the Slider layout example

Figure 1: Displaying the Slider layout example

Step 4 – Slider Controls

It’s time now to style the slider controls that will be initiated by positioning the controls at the bottom and centering them. In case you have slides that are more than four in number, you will require to change the “left” value in order to center the controls.

Listing 5: Represents the Slider Controls

.futurico-theme .nivo-controlNav {
    position: absolute;
    bottom: -30px;
    left: 105px;
}

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.

Listing 6: Creating a circle for each slide

futurico-theme .nivo-controlNav a {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    text-indent: -9999px;
 
    background: #141517;
 
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
 
    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05);
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05);
    box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05);
}
.

Let us add a green gradient and change the shadows for the active slide.

Listing 7: Adding Gradient to the slide

.futurico-theme .nivo-controlNav a.active,
.futurico-theme .nivo-caption span {
    background: #a5cd4e;
    background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
    background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
    background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
    background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
    background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
 
    -webkit-box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3);
    -moz-box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3);
    box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3);
}
Added Gradient to the active slide

Figure 2: Added Gradient to the active slide

Step 5 – Next and Previous Slide

If you want to style the next and previous slide controls, just position it at the center and then incorporate some basic CSS styles (font-family, font-size, color, etc.).

Listing 8: Illustrates the code to style Next and Previous Slide

.futurico-theme .nivo-directionNav a {
    display: block;
    top: 60px;
 
    font-family: 'Consolas', sans-serif;
    font-size: 40px;
    color: #141517;
    text-shadow: 0px 1px 1px rgba(255,255,255, .05);
}
 
.futurico-theme a.nivo-prevNav { left: -40px; }
 	
.futurico-theme a.nivo-nextNav { right: -40px; }

Displays the next or previous slide

Figure 3: Displays the next or previous slide

Step 6 – Captions HTML Markup

Now just in case we need to create the captions, we would require to create a div with a class “nivo-html-caption” and a random id and then in order to link the caption to the respective slide, you need to incorporate a “title” to the with the same name as the caption id.

Listing 9: Illustrates creating the Captions

<div id="slider" class="nivoSlider"> 
    <img src="img/slide1.png" alt="" title="#caption1">
    <img src="img/slide2.png" alt="">
    <img src="img/slide3.png" alt="" title="#caption3">
    <img src="img/slide4.png" alt="">
</div>
<div id="caption1" class="nivo-html-caption">
    <strong>New Project</strong> <span></span> <em>Some description here</em>.
</div>
<div id="caption3" class="nivo-html-caption">
    <strong>Image 3</strong> <span></span> <em>Some description here</em>.
Creating the Captions

Figure 4: Creating the Captions

Step 7 – Caption Style

Now if one want to style the captions as well, this can be done by changing the text colour, the font family and font size. Let us use the same green gradient as used before.

Listing 10: Code representing the way to style the caption

.futurico-theme .nivo-caption {
    padding: 5px 0;
 
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #e1e1e1;
 
    background: #000000;
 
    -webkit-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
}
 
.futurico-theme .nivo-caption span {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 5px 1px 5px;
 
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
 
.futurico-theme .nivo-caption em {
    font-family: Georgia, sans-serif;
    font-size: 11px;
    color: #727581;
}
Styling the Caption

Figure 5: Styling the Caption

Hope you liked, see you next time.



Software developer with more than 5 years of development on Java, HTML, CSS.

What did you think of this post?
Services
Know how to keep MrBool Online
SUPPORT US
SUPPORT US
With your help, we can keep providing free content and helping you to be a better professional
support us
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login