In this chapter we will see how sliders are constructed from the very start using HTML , for the markup and CSS for the styles. We will go over each segment seperately so let's begin!

HTML - Set the structure

Before we can start coding any component or application for the web, we first ought to have a generalised plan for it in place. The foundation for this plan is the HTML markup for the component.

It sets up the structure of the component, which all other features like CSS and JavaScript rely upon.

Being able to come up with simple and concise HTML is a vital skill for a web developer to have, as it makes further development fluid and fairly straightforward.

In this regards, the developer needs to have a strong knowledge of CSS and JavaScript, in addition to a touch of reasoning and logic so that he knows how to construct the markup for any sort of component, in the simplest and most effective way.

For our slider, we'll give you the time to brainstorm and come up with a basic HTML structure for it. What we need is only a couple of slides, a container to hold them, and two navigation buttons to navigate the slider.

Play around with classes, tags and the nesting levels of elements to draft a simple markup for the slider.

Once you're done, move on to consider the method we employ to layout the markup.

Assuming you've done the exercise, let's now solve this problem together.

Following is an illustration of the HTML we'll be using for the slider:

Structure of a simple JavaScript slider

Let's understand the hierarchy of elements in this figure...

  1. The element that will encapsulate all the content of our slider is .slider-cont.
  2. Next, within this container, .slider will hold all the individual slides of the slider in place.
  3. The individual slides are represented by the element .slides. They can contain literally anything including images, headings, paragraphs, forms, even sliders; or a combination of all of this!
  4. Finally, the navigation buttons (which we'll explore in the next chapter) are given as .slider-nav, and placed directly inside .slider-cont; they don't go in .slides because it only holds the slides of the slider, nothing else.

Taking this figure into the glyphs of real HTML markup, we have the following code snippet:

<div class="slider-cont">
    <div class="slider">
        <div class="slides">Slide 1</div>
        <div class="slides">Slide 2</div>
        <div class="slides">Slide 3</div>
    </div>
    <button class="slider-nav">&lt; Back</button>
    <button class="slider-nav">Forward &gt;</button>
</div>

As shown earlier, the main element here is .slider-cont - whatever is related to the slider will go inside this element. Then comes .slider to encapsulate all the actual slides of the slider, and within it the slides, as .slides. Lastly we have the navigation buttons as .slider-nav, thus completing the entire markup.

With this semantic layout in place, now we can easily move on to explore the styling part of the slider.

CSS - Add a touch of style

Consider the CSS below and the explanation following it:

.slider-cont {
    position: relative;
    width: 300px;
}
.slider {
    position: relative;
    height: 250px;
}
.slides {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: grey;
    color: white;
    font-size: 30px;
    text-align: center
}
.slides:first-child {display: block}
.slider-nav {
    padding: 15px;
    margin-top: 10px;
}

We start by giving .slider-cont a postion: relative so that the slides .slides can scale relative to it in their width, and then give it an absolute width of 300px.

The element .slider also has postion: relative so that the slides within it can scale relative to it in their height.

Try removing the lines 2 and 6 to see how they affect the final layout of the slider!

For .slides, lines 8-10 are a MUST for their width and height; position: absolute makes sure that the slides fit into the .slider container. The rest of the properties starting from background-color are just given to signify different slides i.e these properties aren't vital for the slider, they just give it a feel of it.

At this point, this slider is uninteractive - it is just a styled box with two buttons and nothing more.

Uninteractive slider

If you are having trouble understanding the CSS above, please take our CSS course and become a pro in CSS!

JavaScript - Add interactivity

With the HTML and CSS done, we are now only left to work on the scripting part of our slider to make it interactive. We'll cover this in detail in the next chapter and go step by step in the procedure to making this slider truly interactive!