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 make our slider responsive by giving it a percentage width; and then 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 the slider

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

As you might know, 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 as a result, get the slider to fit in any container.

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

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

.slider-cont {
    width: 100%;
}

Now if we go and check out the slider at this point, it would be filling the entire width of the document (excluding the margins of <body>).

No matter what device are we on, the slider would be with in the device's width domain. In other words, in won't be flowing out of the screen horizontally. But yes, this could happen vertically, since we haven't done anything about the slider's height.

For the moment while we are developing our slider, and inspecting different features in it, it would be better if we could resize it in a way that it encompasses the entire screen of the respective device — fills its width and height.

The reason of doing so is to make it easy for mobile users to interact with the sliders we will be developing in the coming chapters.

Undoubtedly, you can tweek the slider's dimensions according to the needs of your application; and even we will demonstrate such examples when we construct a slider library at the end of this chapter.

But for now, we'll go with slider that's responsive in both dimensions — horizontally, in its width and vertically, in its height.

The things we would need for this are as follows:

  • Give .slider a fixed positioning, then a 100% width and a 100% height to fill up the entire viewport.
  • Reposition it using left: 0 and top: 0 to align it with the top-left edge of the viewport.

The following CSS accomplishes these aspects:

.slider {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #666
}

The last declaration here of background-color: #666 is given so that you can easily see that .slider is covering the entire viewport. Later on, we'll remove this, once everything else is in perfect shape.

Live Example

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

Resizing each slide

The next thing we ought to do after resizing .slider, is to resize each slide within it, to cover the slider.

That is, we want each slide to also fill up the entire viewport.

Now, we won't accomplish this by giving each slide a fixed positioning. This is because, if we were to do so, then it won't be flexible for us to resize the main slider without modifying the styles of each slide.

Ideally, what we want is to define the width and height concerns in .slider only — not in every child of .slider. Each child positions itself relative to .slider so that when we change the dimensions of .slider, each child scales likewise.

Coming back to the topic, instead of using fixed positioning, we'll give each slide an absolute positioning and then a width and height value of 100%.

This will get all the slides to cover the entire slider, which is itself covering the entire viewport.

.slider_slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #ddd
}

One additional thing we would do at this point, is give .slider_slides-cont a 100% height. Owing to the fact that each .slider_slide is positioned absolutely, this element has its height reduce down to 0, which we can rectify by manually defining its height.

.slider_slides-cont {
    height: 100%
}

Live Example

As can be seen in the link above, the CSS uptil now has been successful in resizing .slider and all .slider_slides to fill up the entire viewport area.

Go on and remove the background-color: #666 style from .slider — we don't need it anymore.

Our next task is to get the navigation buttons and the pagination in place.

Better navigation buttons

In the sliders we've been constructing so far, we've had a simple and native look for our navigation buttons. That look wouldn't do now — it's time that we build something more stunning!

We'll start off by removing the text from each button including the HTML entity:

<button class="slider_nav">&larr; Previous</button>
<button class="slider_nav">&rarr; Next</button>

Since, an arrow is not really common inside left-right navigation buttons, we'll change our HTML entities to the < (&lt;) and > (&gt;) entities, for the previous and next buttons respectively.

<button class="slider_nav">&lt;</button>
<button class="slider_nav">&gt;</button>

Next, we will position each button absolutely in the slider on each of its ends. The previous button will go on the left side, while the next button will go on the right side.

Since two different styles ought to be given to the left and right navigation buttons, we'll need to select both of them separately.

This could be made easy by giving each button a class that specifies whether it is the left button or the right button.

Following our same old BEM naming convention, we'll give the left button the class 'slider_nav--left', and the right button the class 'slider_nav--right'.

<button class="slider_nav slider_nav--left">&lt;</button>
<button class="slider_nav slider_nav--right">&gt;</button>

With this markup in place, here's a detail of what styles we'll apply to our buttons:

  • Apply the declaration position: absolute, bring the button upwards via top: 0 and position each button on one of the ends of .slider.
  • Give them a height of 100% to cover the entire height of .slider, in order to make for a large clickable region.
  • Increase their horizontal padding to make for a large clickable region.
  • Give them a large font size to make the HTML entity icons stand out.
  • Apply cursor: pointer in order to indicate that the button is clickable.
The purpose of giving height: 100% here is to make it easy for the user to navigate left or right. This declaration increases the clickable region of each button, preventing the need to take the pointer to the precise location of the button's icon in order to click it. The same goes for the padding declaration.

Sometimes, while developing a feature, we have to think out of the box!

Furthermore, we'll also need to overwrite a couple of default user-agent styles applied on the <button> elements — in particular, the border, outline and background-color properties.

Following all these details, we arrive at the following CSS code:

.slider_nav {
    position: absolute;
    top: 0;
    height: 100%;
    padding: 0 30px;
    font-size: 3em;
    cursor: pointer;

    /* overwriting default user-agent styles */
    background-color: transparent;
    border: none;
    outline: none;
}
.slider_nav--left {
    left: 0
}
.slider_nav--right {
    right: 0
}

Live Example

The buttons just look marvellous!

Now just for that extra cheese on top of the pizza, we'll apply a :hover style on these buttons to clearly indicate when one of them is in focus:

.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 indicating the interactivity of the button.

Check all this out below!

Live Example

Showing the pagination

Thanks to the styles given above to our slider, the pagination has disappeared. Our last concern is to get it to appear at the bottom of the slider.

We'll start by absolutely positioning the .slider_pagination element and taking it near the bottom of the slider using the bottom property.

Next, we'll increase it's width to 100%, as position: absolute shrinks it to fit the content of the element.

Lastly, we'll align its content to the center.

Altogether, this translates to the following CSS:

.slider_pagination {
    position: absolute;
    bottom: 30px;
    width: 100%;
    text-align: center;
}

Live Example

Moving on

And with all these minor changes applied to our slider the final result looks really stunning — just like a real slider.

Remember that all the styles we've applied to our slider in this chapter are based on the fact that we want to demonstrate some upcoming features of our slider easily and conveniently to you guys.

By covering the viewport with the slider, we can be rest assured that all our readers, be they on whatever device — mobile, tablet, desktop — can easily interact with the slider examples shown.

You might not need viewport-covering sliders in your application, and would therefore have to tweek the CSS above according to your needs.