HTML CSS Image Slider main

HTML CSS Image Slider for Image slideshow Tutorial

What is an HTML CSS Image Slider?

A HTML CSS image slider is a creative way to show an image slideshow. An image slider is basically an object on your webpage that cycles through the various images that you provide it, only displaying one at a time. And if you couldn’t already tell, a HTML CSS image slider is technically an image slideshow that has been created using only HTML and CSS programming languages. The images in your HTML CSS image slider can be set to automatically scroll using CSS animations, or you can take advantage of CSS transitions and implement slider control buttons that will change the image only on a web visitor’s click. Once again, an image slider is a great way to present dynamic content to your website visitors.

A lot of times an HTML CSS image slider is also referred to as a “pure CSS image slider” (just the HTML part is left out). Also, the terms slideshow and slider can be used interchangeably here. 🙂

Creating an image slideshow/image slider with just HTML + CSS was not an easy task few years ago. Since the release of CSS3, transitions and animations using CSS have become very easy. A great slider can be created with just a few lines of code. It is the perfect coding project for a new web developer to get his or her hands dirty. Anyhow, let’s get started.

I will be showing you how to make the following image slider:

HTML CSS Image SliderHTML CSS Image SliderHTML CSS Image Slider

Create a HTML CSS Image Slider

First, we need to gather the images for our image slideshow. Make sure all the images are the same size, otherwise they will get cut off by our “display window”. For this image slider, I am only going to use 3 images, however you can use as many as you want once you have the concept down. Here are the 3 images I am going to be using:

HTML CSS Image Slider
HTML CSS Image Slider
HTML CSS Image Slider
right-click > Save

Feel free to use the images I have provided above, or use any images you want. Just make sure the image names match the names in your HTML code.

Create a HTML & CSS only image slider

I named the images one.png, two.png, and three.png respectively and saved them in a folder called cssSlider/images/. Now, create a file and name it index.html. This will hold the HTML part of our code. Also, create a file named style.css to hold our CSS code. When all the files are ready, our folder/file structure should look like the following:

HTML Part

Now, we need to code the HTML part of our HTML CSS image slider. Open up the index.html file that we just created and copy and paste the following code:


<!DOCTYPE html>
<html>
<head>
	<title>TechSideOnline.com HTML CSS Image Slider</title>
	<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="slide-holder">
	<span id="slide-1"></span>
        <span id="slide-2"></span>
        <span id="slide-3"></span>
	<div class="slide-group">
		<img src="images/one.png" class="slide-image" id="slide-1" /><img src="images/two.png" class="slide-image" id="slide-2"/><img src="images/three.png" class="slide-image" id="slide-3"/>
	</div>
	<div class="slide-button-holder">
		<a href="#slide-1" class="slider-button"></a>
		<a href="#slide-2" class="slider-button"></a>
		<a href="#slide-3" class="slider-button"></a>
	</div>
</div>
</body>
</html>

I hope you have enough HTML experience to understand the above code. We are basically setting up the <span> and <div> elements so we can “transition” through our image collection. If you run the index.html page, you will notice that all you see are the images lined up next to each other. Before we start programming the CSS, i’m going to briefly explain how our image slideshow is going to work. We are going to have a slide-holder container that will hold another container class slide-group, which will hold all our slides. The slide-holder will only be the width and height of ONE of our images in our HTML CSS image slider (in this case 400px x 200px).

HTML CSS slideshow transition
Shows how slide-group moves relative to slide-holder

Another way to look at the above diagram is to imagine the slide-holder as our “window,” and the contents of our slide-group is our entire panoramic view. When standing behind the window, we can only see certain sections of our entire view.

The slide-group container inside the slide-holder container, will hold all our image slides and be the width of all our images combined. We will then use the CSS transition property to “cycle” through the images, by moving the slide-group container (which is basically our images lined up next to each other) left and right inside the slide-holder container, which will have the CSS overflow property to hidden. In order to cycle through our image slideshow, we have also setup buttons on the bottom of our HTML code for the user to click.

CSS Part

Now, we need to focus our energy on the CSS file for our HTML CCS slider. Go ahead and open up our style.css sheet and add the following:


/*TechSideOnline.com HTML CSS Image Slider */
.slide-holder
{
	width:400px;  /*set the size of our slide holder*/
	height:200px;
	background-color:black;
	margin:auto;
	overflow:hidden;  /*overflow set to hidden*/
}

.slide-group {
	width:1200px; /*width of our images combined*/
	height:400px;
	position:relative; /*position relative to parent*/
	clear:both;
	z-index:0; /*set the z-index */
	left: 0px; /*position the slide-group to the first image */
}

.slide-image { /*setup our individual images*/
	float:left;
	margin:0px; 
	padding:0px;
	position:relative; 
	z-index:1; 
}

I tried to comment the code above, however, it basically sets up our two containers (.slide-holder and .slide-group), and makes the first image in our HTML CSS image slider visible only, and the rest of the images are hidden behind the overflow. You can also see we configured our individual images with the CSS selector: slide-image. The z-index property is defined for the above CSS selectors because, as you will see later, we need our buttons to sit on TOP of the current image in our image slideshow. If you run your index.html file, you should see just the following:


only content inside slide-holder container shown

HTML CSS Slider Control Buttons

Now, let’s go ahead and setup our buttons, which will function as our HTML CSS slider control. Append the following bit of code to the bottom of your style.css file:


/* START TechSideOnline.com HTML CSS Slider control buttons */ 
.slide-button-holder {
	position: relative;
	z-index:2;
	text-align:center;
	top:-220px;
	background: rgba(0, 0, 0, 0.7);
}

.slider-button {
	display:inline-block;
	height:10px;
	width:10px;
	background-color:#fff;
	border-radius:10px;
}

.slider-button:hover {
	background-color:#ccc;
}

/* END HTML CSS Slider control buttons */ 

The above code basically creates 3 slider control buttons. Each button corresponds to an image in our image-group. Now you should see a black bar, at the bottom of our HTML CSS image slider, with our slider control buttons positioned on top:

HTML CSS Image Slider control buttons
Slider control buttons added!

The CSS z-index property allows us to “layer” the various HTML objects. A lower z-index property value object will be positioned beneath a high z-index property value object.

While the image slider looks great, it doesn’t do much at all, even if you hit one of the slider control buttons. Our image slider needs to display the next image in the slideshow, when the user clicks on the corresponding slide button. Hence, we need to append the following bit of code:



/*use the :target selector to set the left position of our .slide-group  */
#slide-1:target ~ .slide-group{ /*first button moves it to initial position*/
	left:0px; 
}
#slide-2:target ~ .slide-group{ /*second image starts at 400px */
	left:-400px;

}
#slide-3:target ~ .slide-group{ /*third image starts at 800px */
	left:-800px;

}


Take note that the left property is set to a negative (-) number. The negative number allows the CSS to move our slide-group right.

If you run your index.html file, you should notice that clicking the buttons changes the image in our HTML CSS slideshow, however the transition from image to image isn’t smooth at all. This is where the CSS transition property comes in hand.

Adding CSS Transition property

The transition needs to be added to the .slide-group CSS selector. Our complete .slide-group CSS selector needs to look like:


/*update the slide-group properties */
.slide-group {
	width:1200px;
	height:400px;
	position:relative;
	clear:both;
	z-index:0;
	left:0px;

        /*set transition property for all browsers */
        -webkit-transition: left 2s;
        -moz-transition: left 2s;
        -o-transition: left 2s;
         transition: left 2s;
}

Finally, you can re-launch our index.html file and click on the slider control buttons. As a result, your image slider should take 2 seconds to transition from one image in our image slideshow to the next image in our image slideshow.

HTML CSS Image Slideshow Animation

Furthermore, another neat CSS3 property worth taking a look at is the Animation property. The CSS animation property lets us animate our slideshow versus having the slider control buttons. The animation property will let automatically “cycle” through all the images in our slide-group. To setup CSS animation, we need to modify the CSS code of our slide-group to the following:


/*slide-group CSS animation property*/
.slide-group {
	width:1200px;
	height:400px;
	position:relative;
	clear:both;
	z-index:0;
	left:0px;

	/* add following CSS animation properties */
        animation-direction: alternate;  /*go forwards and backwards*/
	animation:animate 12s infinite;   /*call keyframe "animate" (see below)
 - total animation length 12 seconds*/

	-webkit-animation-direction: alternate; /* chrome support */
	-webkit-animation:animate 12s infinite;

         /*   commented out transition properties
           -webkit-transition: left 2s;
            -moz-transition: left 2s;
            -o-transition: left 2s;
            transition: left 2s;   */
}

/*Add keyframes to animate the images*/

@keyframes animate {
    0% {left:0px;}   /*first image */
    10% {left:0px;}
    25% {left:-400px;}  /*second image */
    35% {left:-400px;}
    50% {left:-800px;}  /*third image */
    60% {left:-800px;}
    75% {left:-400px;}   /*second image */
    85% {left:-400px;}
    100%{left:0px;}  /*first image */
}

/* chrome support */
@-webkit-keyframes animate {
    0% {left:0px;}
    10% {left:0px;}
    25% {left:-400px;}
    35% {left:-400px;}
    50% {left:-800px;}
    60% {left:-800px;}
    75% {left:-400px;}
    85% {left:-400px;}
    100%{left:0px;}
}



As a result, when you launch your index.html file, your slideshow images should automatically begin to cycle, first forward, then backwards (animation-direction:alternate;). The total animation should last 12 seconds (animation: animate 12s infinite;), from first image to last image, and finally back to first image. This is denoted by the “animate” keyframe, which we defined at the bottom of our style.css file. Basically, the keyframe is spread out using percentages, and since we set the animation duration to 12s, 0% to 100% keyframe cycle only lasts 12 seconds. So you will have to do some calculations based on the number of images you use and the duration.

I’m not going to dive deep into keyframes for this tutorial, however feel free to check out http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp.

Summary

In conclusion, a HTML CSS image slideshow is very easy to make and gives your website a more “responsive” look and feel. In the above tutorial, we learned some new CSS properties (transition, z-index, animation, etc.), and how to utilize them to make an effective and efficient image slider. Since we didn’t have to use JavaScript, or any other language for that matter, our HTML CSS image slider is quick to load. A slider/slideshow is a great way to present a group of images, or articles to your audience. Whether you choose to use animation, or transitions, one thing’s for certain, CSS3 is more powerful and easier to code than ever before.

Learn how to make a flat icon navigation bar with CSS + Font Awesome.
Create an ultra simple WordPress FontAwesome Plugin.

Leave a Reply

Your email address will not be published. Required fields are marked *