Introduction

Before moving over to adding some really stunning CSS transitioning effects to our slider, starting from the next Slider Effects unit, we would first take out some time to polish it in its styles that currently aren't that appealing. And that's what this chapter is all about.

In this chapter we shall first add some styles to .slider-cont, and then hop on to improve the look and feel of our navigation buttons using an icon font and some solid CSS positioning skills.

So what are we waiting for? Let's begin!

Resizing .slider-cont

In all the previous chapters, the main container for our slider - the .slider-cont element - had a fixed width.

As you might realise, this is bad - especially given the fact that we have responsive designing right at our dispense in modern-day CSS. What we should do instead is use a relative width and therefore allow the slider to fit in any device width.

This is possible using percentage dimension values such as 20%, 60% and so on.

Following we change .slider-cont's width from a fixed value to a responsive, percentage value:

.slider-cont {
    position: relative;
    width: 100%;
}

Live Example

For more info on percentage widths, please refer to the chapter on CSS Dimensions - Basics.

Better navigation buttons

Now let's dive into our second requirement of making the navigation buttons look visually appealing. In the previous sliders we had a simple and native look for our navigation buttons, but that wouldn't do in this case - now we have to build something more stunning!

What we will be doing with regards to our navigation buttons is very iconic..

Simply replace the text within these buttons with icons.

Icons picturise long stories in short words, and so instead of using the names Backward or Forward for our left and right buttons, we can simply give them left and right arrow icons to symbolise the same meaning.

We'll be using icons from the Font Awesome icon pack. Font Awesome provides a whole list of stunning icons for us to use, in the form of a font.

The idea of icons inside fonts is very common these days and even quite handy - icon fonts work just like normal fonts, such as 'Times New Roman', do. They can be scaled up and down using font-size without pixelating, colored using the color property and so on.

Therefore we choose an icon font for now.

However, you can go with anything you like: create your own vector images or just simply use the angle bracket symbols using HTML entities > (>), or better yet some other crazy entities such as (⟩), » (»).

To import the font pack, we just have to link to Font Awesome's CSS file using the <link> tag.

Then to show a given icon, we have to assign a class to the element i and inline it in the place where we want the icon to appear. Since we want the icon to appear within our button, it'll go inside the <button> element.

Summing all this we arrive at the following code:

<button class="slider-nav slider-nav-left"><i class="fas fa-angle-left"></i></button>
<button class="slider-nav slider-nav-right"><i class="fas fa-angle-right"></i></button>

Notice that we've added two new classes in this markup: .slider-nav-left corresponds to all left buttons, and similarly .slider-nav-right corresponds to all right buttons.

These two classes will help in selecting, and therefore styling, the buttons more easily.

Live Example

Amazing! Now we have icons in our buttons. But the buttons need more CSS styling therapy to make them even more amazing.

Since we've used font-based icons we will use font related properties to size them. For your case you can do essentially the same thing with images too, if you've used them instead.

.slider-nav {
    /* Remove default styles */
    outline: none;
    border: 0;
    background: transparent;
    /* Remove default styles */

    position: absolute;
    display: block;
    top: 0;
    padding: 0px 40px;
    height: 100%;

    cursor: pointer;
    font-size: 35px;
    color: white;
    transition: 0.2s ease-in-out;
}
.slider-nav-left {
   left: 0
}
.slider-nav-right {
   right: 0
}

Lines 3-5 here serve to override the existing styles of buttons in user agent stylesheets.

Lines 8-12 serve to layout the buttons to the positions we want them to be at.

Lines 14-17 are just for a personal preference of styling. Line 17 is essentially added for giving a smooth transition to the hover state of the buttons.

And now just for that extra cheese on top of the pizza, we will give the hover states of the buttons a box shadow effect:

.slider-nav-left:hover { 
    box-shadow: inset 50px 0px 100px -55px rgba(0, 0, 0, 0.5);
}
.slider-nav-right:hover {
    box-shadow: inset -50px 0px 100px -55px rgba(0, 0, 0, 0.5);
}

When the mouse pointer is brought over one of the buttons, a slight inset shadow appears smoothly indicating the interactivity of the button.

Check all this out below!

Live Example

Pagination circles

Uptil now we've had our pagination circles aligned to the left of their container, but it is now that we will change them to center align in it. And this would be the job of just one property - text-align.

Moreover we will also give the circles a pointer cursor to indicate that they are interactive elements.

.pagination { 
    text-align: center
}
.pagination span { 
    cursor: pointer;
}

Final Result

And with all these minor changes applied to our slider the final result looks really stunning - just like a real slider. Go check it out.

However note that the example below that we've linked to, has the variable automate = false and thus you won't see any automatic sliding or progress bars.

Better styled slider