Slider Basics

Before beginning to code any component or application for the web, we first need to have a generalized plan for it in place. Step one in developing this plan is to come up with the HTML markup for the component.

HTML defines the structure of the component, which all other features like CSS and JavaScript rely upon. Once the structure is there, filling it up with tinier pieces of detail is a fairly easy task.

The real challenge is to to come up with a simple and concise markup that makes further development fluid and fairly straightforward.

In this regards, we need to have a strong knowledge of CSS and JavaScript in order to construct the markup for the component in the simplest and most effective way.

For instance, using our knowledge of CSS, we can reason things like 'how many nestings would be required in order to float an element A', or that 'where an element B should be placed if it's to be positioned absolutely on the left side of another element', and so on and so forth.

Similarly, using our knowledge of JavaScript, we can reason things like 'whether that element needs to have a certain class so that it could be easily selected in JavaScript', or that 'whether a piece of text needs to be encapsulated within an element so that it could be easily changed to some other value'.

Once the HTML is set up in the best possible way, working on everything else becomes something close to a piece of cake — without troubles, without hassles.

Now before we start the discussion on how to construct the markup for a very simple slider, take your time and think on how to do this yourself.

What you need is only a couple of slides, a container to hold them, and two navigation buttons to navigate the slider back and forth.

Try to ask yourself questions such as:

1. How would I denote each slide?
2. What class would I give to the main container of the slides?
3. Shall I be using an <div> or a <p>, or any other HTML tag for this element?

.. and so on.

Work through every step logically and gradually — there is no need to hurry!

Try to relate everything that you do in this stage back with CSS and JavaScript, i.e. how would the thing make your life easier or difficult in terms of CSS and/or JavaScript.

Once again, question yourself that:

1. Is the HTML capable of being styled easily in CSS?
2. Will it be easy to work with the HTML in JavaScript?

Just try to play around with HTML tags, class names and the nesting levels of the given elements to draft a simple markup for the slider.

Believe it or not, at the end of this tutorial, as we continuously get you to go through this brainstorming process each and everytime we implement a new feature, you'll feel yourself a better thinker, a better problem-solver and ultimately a better programmer.

But don't take our word for it! Try it yourself and you'll see how interesting it is to make something on the web in the most effective manner.

Thinking break.....

Once you're done, continue reading below to join up in the discussion on the steps to construct the markup for a slider.

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

We can break up a slider into individual bits and pieces in the following way:

Wireframe showcasing a simple slider's structure

Let's understand what's happening here...

1. The main element that encapsulates all the content of our slider is .slider. It's a good habit to encapsulate a given component completely into an HTML tag so that all its sub-components can be accessed easily through this tag.

2. Next, within this main element, .slider_slides-cont holds all the slides of the slider.
3. The individual slides are represented as .slider_slide. They can contain literally anything including images, headings, paragraphs, forms, even sliders!
4. Finally, the navigation buttons (which we'll explore in the next chapter) are given as .slider_nav, and placed directly inside .slider.
   These navigation buttons don't go in .slider_slides-cont because it is meant to only hold the slides of the slider, nothing else.

The class naming convention we're using for our slider's individual components is the BEM (Block-Element-Modifier) convention.

Let's now convert this discussion into the glyphs of real HTML markup:

<div class="slider">
   <div class="slider_slides-cont">
      <div class="slider_slide"><!--Slide content here--></div>
      <div class="slider_slide"><!--Slide content here--></div>
      <div class="slider_slide"><!--Slide content here--></div>
   </div>
   <button class="slider_nav">&larr; Previous</button>
   <button class="slider_nav">Next &rarr;</button>
</div>

A quick recap:

The main element is .slider — whatever is related to the slider goes inside this element; .slider_slides-cont holds all the slides of the slider; .slider_slide represents each slide; and lastly, each <button> element .slider_nav represents a navigation button.

Now as is obvious in the markup shown above, we haven't yet added any content inside each slide (i.e. each .slider_slide element). There are just mere comments placeholding for some real content.

We can add anything we want, be that text, images, or videos. However, for now, we'll stick with images — three in particular.

Shown below is the complete HTML code along with the slides' content:

<div class="slider">
   <div class="slider_slides-cont">
      <div class="slider_slide"><img src="pexels-stijn-dijkstra-2499786.jpg"></div>
      <div class="slider_slide"><img src="pexels-addie-3152128.jpg"></div>
      <div class="slider_slide"><img src="pexels-nextvoyage-3520548.jpg"></div>
   </div>
   <button class="slider_nav">&larr; Previous</button>
   <button class="slider_nav">Next &rarr;</button>
</div>

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

At this stage, when we are concerned with a very basic slider, we don't need any special sort of CSS.

What we need is just a custom width for each .slider_slide and the images therein so that we can be rest assured that the images don't overflow on mobile devices, yet remain large enough on desktop devices.

The following two simple rulesets accomplish this:

.slider_slide {
   width: 100%;
   max-width: 900px;
}

.slider_slide > img {
   width: 100%
}

We have chosen a max-width of 900px since that keeps the corresponding height of each of our images within the viewport. You can set this property to any value as you like, but make sure to remain below the natural width of the images, or else they would pixelate.

This CSS is all that we need at the moment except for just one thing.

That is, currently all the slides show up on the page, however we only want the first one to show up. All the subsequent slides are to be shown by means of interaction with the slider i.e. when someone clicks the Next → button.

So how to hide all but the first slide?

Well, just set display: none on .slider_slide to hide all the slides, and then set display: block on the first slide to show it:

.slider_slide {
   width: 100%;
   max-width: 900px;
   display: none;
}

.slider_slide:first-child {
   display: block;
}

.slider_slide > img {
   width: 100%
}

And this completes our CSS. Easy, was it?

At this point, the slider is uninteractive. That is, it's just a styled box with two buttons and nothing more.

You can see it in the following link:

Uninteractive slider

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 where we'll go step by step in making this slider truly fully-functional.