Tutorials‎ > ‎

Image Slider Using CSS - Checkbox Hack

posted Oct 27, 2013, 10:16 PM by Arden Sagiterry Setiawan   [ updated Aug 15, 2016, 11:30 PM by Surya Wang ]

Introduction

Image slider is a powerful visual element for gaining user attention in a website. The common way to create this element is by using JavaScript. However, using a technique called Checkbox Hack, we can simulate an image slider completely using only CSS. Coupled with CSS3 animation, we can create an image slider rivaling those made using JavaScript. Please remember that this is not the "correct" way to use CSS. It is fun to do this, though. Now you can brag to your friends. "Look, no JavaScript!"

Requirements

Checkbox Hack Concept

When you create an HTML Form <input> element, you can put a <label> element to link it with id. If you clicked the <label> element, the corresponding <input> element will be focused. This fact makes us able to control which <input> element we really want to be active at the moment.
Checkbox Hack used this concept to further control how the web page is shown. The usual utilization of this concept is by using CSS to hide all elements, and then showing only the ones adjacent to the currently active <input> elements. We are going to create an image slider using this technique.

HTML Code

Create an HTML file. This is the code. The image source link should depend on where our images are located. In this tutorial, it is inside a folder named img. Feel free to change it based on your need.

<!DOCTYPE HTML>
<html>
<head>
<title>Checkbox Hack CSS Slider </title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="slider">
<div class="main">
    <input type="radio" name="nav" id="img1" />
        <input type="radio" checked="checked" name="nav" id="img2" />
        <input type="radio" name="nav" id="img3" />
        <input type="radio" name="nav" id="img4" />
    <div class="nav overlay">
            <div class="buttons">
                <label for="img1"><img src="img/1.jpg" /></label>
                <label for="img2"><img src="img/2.jpg" /></label>
                <label for="img3"><img src="img/3.jpg" /></label>
                <label for="img4"><img src="img/4.jpg" /></label>
            </div>
        </div>
        <div class="images clearfix">
            <img src="img/1.jpg" />
            <img src="img/2.jpg" />
            <img src="img/3.jpg" />
            <img src="img/4.jpg" />
        </div>
    </div>
    <div class="imagebg"></div>
</div>
</body>
</html>

There are 3 main components in this structure.
  1. Inputs. We use radio for the type of input because we will only show one image at the time. Notice that we give each input a specific id. This will be used by our labels. One of the radio button is already in active state (checked="checked"), meaning that this is the default image we would focus initially.
  2. Labels. We link the labels with their respective <input> using for attribute. For this tutorial we will use small images (thumbnails) as the label. To do this we simply put <img> elements with similar src attribute with our real images. We will make them the thumbnail version later with CSS.
  3. Images. This is the images we will show in image slider. To ensure that the images are shown correctly, use 600px x 400px images. You can use the images included in this tutorial as example.
If we view it in the browser, it would show 4 radio buttons with images below it. It would not do anything for the moment. This is where CSS does its magic.

CSS Styling and Checkbox Hack

This code goes to style.css. First we positioned the slider so it is located neatly in our web page.

#slider{
  position:relative;
  margin-bottom:20px;
  width:100%;
  overflow:hidden;
}
#slider .main{
  position:relative;
  width:600px;
  height:400px;
  margin:0 auto;
  z-index:10;
}
#slider .imagebg{
  position:absolute;
  top:50px;
  left:0px;
  border:2px solid #333333;
  border-left:0px;
  border-right:0px;
  width:100%;
  height:300px;
  background-color:#666666;
  z-index:0;
}

The styling requires little explanation than personal preferences. This will make our image positioned in the center of the page, with the radio buttons above them. There is a thick grey line behind the image, the importance will be known later. Note that there's only one images showing although we have 4; because we set #slider with overflow:hidden, any elements outside its width and height would be hidden from view. This will be useful later on. Let us proceed with more styling.

#slider .images{
  position:absolute;
  left:0px;
  top:0px;
  width:8000px;
  transition: 0.75s;
  -moz-transition: 0.75s;
  -webkit-transition: 0.75s;
}
#slider .images img{
  position:relative;
  display:block;
  top:50px;
  float:left;
  width:450px;
  height:300px;
  background-color:#000000;
  opacity:0.5;
  transition: 0.75s;
  -moz-transition: 0.75s;
  -webkit-transition: 0.75s;
}

Adding these lines would show the slider images, positioned horizontally alongside the grey lines (see? that is the use of it). This horizontal positioning is accomplished using float:left styling. The <div> element with .images class is used as its "placeholder", which is why we put a very wide width to it. Because our main placeholder (#slider) has overflow:hidden, the left over width would not disturb the web page but rather neatly hidden behind the scene.
Notice that there is now two images, the horizontally positioned images and one big rather-transparent images. The big one is actually the thumbnails we will use to control the slider. It is still a mess because it has not been styled yet. Let us do the navigation.

#slider input{
  display:none;
}
.overlay{
  position:absolute;
  bottom:0px;
  left:0px;
  background-color:rgba(0,0,0,0.8);
}
#slider .nav{
  position:absolute;
  bottom:-60px;
  left:0px;
  width:100%;
  height:60px;
  line-height:60px;
  z-index:100;
  transition:0.5s;
  -moz-transition:0.5s;
  -webkit-transition:0.5s;
}
#slider .nav .buttons{
  position:absolute;
  right:0px;
  bottom:10px;
}
#slider .nav label{
  position:relative;
  display:block;
  float:left;
  margin-right:10px;
  width:40px;
  height:40px;
  line-height:40px;
  background-color:black;
  border:1px solid #f2f2f2;
  cursor:pointer;
  overflow:hidden;
}
#slider .nav label > img{
  position:absolute;
  left:-10px;
  width:60px;
  opacity:0.5;
  transition: 0.75s;
  -moz-transition: 0.75s;
  -webkit-transition: 0.75s;
}

First we hide the built-in icon for radio button with display:none. And then, we styled our .overlay class (which is used in the navigation section of our slider) so it is positioned with its bottom in line with our slider's bottom. We also put a background-color with transparent black.
Now we style the actual .nav class. It is simply to create a 60px-high block to contain our button. Note that we put bottom:-60px there. This ensured that it will be hidden initially. The last touch is the transition element, an animation style from CSS3. For now we put 0.5s (seconds) as its value.
The rest is explanatory enough, just put to further style the buttons. It would make the big images from before into small thumbnail pictures. Notice that we put another transition style for our navigation <img>. We will come back to it later.
Now, putting these styles would hide the navigation. We want for it to appear when we hover on the slider's bottom part. For this reason, we put another line of CSS as follows.

#slider .main:hover .nav{
  bottom:0px;
}

Remember that we put our .nav class's bottom style as -60px? This one undo it by putting it back to 0px. If we did not specify transition style, it would appear instantly. With transition, it would give us a smooth, slide-up animation. Now we have those cute tiny thumbnails as buttons! Unfortunately they still do nothing.

Now we finally arrived in the Checkbox Hack. This is where we will specify how the slider works.

#slider input:nth-child(1):checked ~ .images > img:nth-child(1),
#slider input:nth-child(2):checked ~ .images > img:nth-child(2),
#slider input:nth-child(3):checked ~ .images > img:nth-child(3),
#slider input:nth-child(4):checked ~ .images > img:nth-child(4)
{
  top:0px;
  width:600px;
  height:400px;
  opacity:1;
  box-shadow:0px 0px 10px #000000;
}

This line of CSS might be a bit confusing, but it is actually simple. First we search for the input which has checked attribute. Then, if it is indeed checked, we search for an image inside the .images placeholder and apply the styling. We make it bigger than the gray line, and set its opacity to 1 so it becomes brighter. Notice the ~ (tilde) symbol; it means select the element adjacent to the one from before (the sibling). In this case, we select the .images adjacent to the input element. However, the style will be applied not to the .images, but to the img element inside it (because CSS will only apply the styling to the innermost element selected). We need to repeat it 4 times because we can only select one specific element at a time. If we have more images, we will need to repeat it more than 4 times. Same thing apply if we have less images. We use nth-child(n) for this purpose, with n is an exact number. nth-child(1) means the very first of that element found in the specified container, while nth-child(3) means the third instance of that element.

The images have gotten big as intended, but the positioning is still strange. We should correct the positioning with absolute values.

#slider input:nth-child(1):checked ~ .images{ left:0px; }
#slider input:nth-child(2):checked ~ .images{ left:-450px; }
#slider input:nth-child(3):checked ~ .images{ left:-900px; }
#slider input:nth-child(4):checked ~ .images{ left:-1350px; }

What this do is nudging the .images to the left, based on which image is selected. As we can see, if we selected the 3rd image, the .images will be nudged 900px to the left (indicated with negative value). This ensures that the big picture (the active one) will be positioned right in the center of the slider, while also giving a neat sliding animation for the other images.

Finally, we give the buttons a "glowing" animation, highlighting the selected buttons. We simply make the button image's opacity to 1.

#slider input:nth-child(1):checked ~  .nav > .buttons > label:nth-child(1) > img,
#slider input:nth-child(2):checked ~  .nav > .buttons > label:nth-child(2) > img,
#slider input:nth-child(3):checked ~  .nav > .buttons > label:nth-child(3) > img,
#slider input:nth-child(4):checked ~  .nav > .buttons > label:nth-child(4) > img
{
  opacity:1;
}

In Action



Conclusion

This is the end of our tutorial. This is only one way to implement the Checkbox Hack. I encouraged you to experiment with how the basic concept was done and explore how much you can tweak around with it.

Thank you for reading.

ċ
imageslidercss.zip
(301k)
Arden Sagiterry Setiawan,
Oct 27, 2013, 10:16 PM