Pure CSS Image Slider Without Javascript Slideshow

Author
In CSS Tutorial, Slideshow Last updated Jan 21, 2017
Pure CSS Image Slider

In this tutorial, I will give you step by step guideline to make pure CSS image slider by using CSS3 and HTML5 technique. There is no javascript require. It is a pretty impressive slider which works on all major browser, including IE versions from IE9 to IE11. This Slideshow very easy to customize and ability to add more or fewer images. It’s super fast, light, responsive, and retina-ready.

Pure CSS Image Slider Features

The most important feature in our slider, It works with left and right arrow navigation which isn’t possible in other sliders such as, this slider is simple and work in auto mode but it doesn’t have controls to manually slide the photos.

Our CSS image slideshow is fully responsive allows you to add text and links to the picture, That possible with its awesome feature of pure CSS Tooltip on the pictures. In addition, It is Light Weight because it didn’t use any kind javascript or jquery so it makes sure your website should not slow down.

If you are looking for Javascript solution and don’t want to use our simple CSS based image slider then I would like to recommend you W3.CSS Slideshow which is good as compare to other Javascript sliders. It gives you an easy way of implementation and all you need to copy and paste few line of code.

Pure CSS Image Slider: How Does it work?

Before I get started, I would like to let you know that we have already developed a CSS Background Image Slider which is a fullscreen slider and work with auto mode.

Let’s take a quick look and know how our slideshow work. The first thing is that It floats the images left or right with animated slide effect. It has five slider images and each image move with left-margin: -100%; The first image of the slider should stay visible by putting the margin-left:0; I also used selectors (~) which make the slider change on click. When a radio button: checked, the sibling selectors (~) allow us to change the slider image.

#slide1:checked ~ #cc-slides .inner { margin-left:0; }
#slide2:checked ~ #cc-slides .inner { margin-left:-100%; }
#slide3:checked ~ #cc-slides .inner { margin-left:-200%; }
#slide4:checked ~ #cc-slides .inner { margin-left:-300%; }
#slide5:checked ~ #cc-slides .inner { margin-left:-400%; }

The HTML Markup

Ok so let’s start with HTML markup and you see that we have wrapped up all the HTML code inside the main container. In this case, our container define as HTML5 attribute called article which has an ID cc-slider

Inside the container or wrapper, we have define five input type radio. Why five ? because we have total five images for our slider and the first one will be checked. You also notice that each of radio button have it’s unique class name which will help us to identify each Image clicked.

<article id="cc-slider">
<input checked="checked" name="cc-slider" id="slide1" type="radio">
<input name="cc-slider" id="slide2" type="radio">
<input name="cc-slider" id="slide3" type="radio">
<input name="cc-slider" id="slide4" type="radio">
<input name="cc-slider" id="slide5" type="radio">
</article>

Next, What we do here to define another wrapper which will hold all the images. You see ID cc-slides is our main container in this case. You also see two more child divs inside the wrapper and the one div have ID overflow used to make the slider overflow hidden. By doing so, we will able to hide all the images except active one. The next child div inner will use to define the total width according to a number of slides and to know more about it, please refer to The CSS section.

<div id="cc-slides">
<div id="overflow">
<div class="inner">
</div>
</div>
</div>

Now Let’s move on the sliding image section and here we simply need to define each image. I will simply define HTML5 attribute article. Inside the article, I will place a div for tooltip and then define image source.

<article>
<div class="cctooltip">
<h3>Amazing / Photoshop / Photography</h3>
<h4>By <a href="#">codeconvey</a></h4>
</div>
<img src="images/slide-1.jpg"> 
</article>

We are almost finished with HTML markup and one last thing we need to do it to define controls. To add controls, we will use label attribute and each label will have unique ID. Remember that these IDs will be same as you define for input type radio buttons.

<div id="controls">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
<label for="slide5"></label>
</div> 

The CSS

Now it’s time to have a look the CSS. First of all, we need to define max-width for main wrapper (#cc-slider ) and do some basic stuff like alignment.

#cc-slider {
text-align: center;
margin: 0 auto;
max-width: 850px;
}

We need to make sure that all the input type radio buttons should be display:none;

#cc-slider input {
display: none;
}

You can add color for any link added in the tooltip by using following code.

#cc-slider label, a {
color: #ef023f;
cursor: pointer;
text-decoration: none;
}
#cc-slider label:hover {
color: #ff0042 !important;
}

You know that We have define five input type radio buttons in our HTML markup section and now it’s time to define their CSS. We will used margin-left for each slide. The first slide will have 0 margins left because it will always visible. The next one has -100% and an increase in a negative way.

#slide1:checked ~ #cc-slides .inner { margin-left:0; }
#slide2:checked ~ #cc-slides .inner { margin-left:-100%; }
#slide3:checked ~ #cc-slides .inner { margin-left:-200%; }
#slide4:checked ~ #cc-slides .inner { margin-left:-300%; }
#slide5:checked ~ #cc-slides .inner { margin-left:-400%; }

The overflow should be hidden for all images and the width should be 100% for induvial images.

#overflow {
width: 100%;
overflow: hidden;
}
#cc-slides article img {
width: 100%;
}

But the width for inner div should be 500% because we have total five images in the slider. If you want to add more images and let’s say you have six images then the width should be 600%;

#cc-slides .inner {
width: 500%;
line-height: 0;
}

We also do one more thing here is to define the total number of images into 100 so we will get the width for each image.

#cc-slides article {
width: 20%;
float: left;
}

Style Pagination (Next/Prev)

To style the Next and Previous button, first, we will move the both buttons above the slider images by using position absolute. Next we will make sure that the attribute lable should not show, so we will make it display: none;

#controls {
height: 50px;
position: absolute;
bottom: 9px;
right: 9px;
}
#controls label { 
display: none;
width: 50px;
height: 50px;	
}
#controls label:hover {
opacity: 0.8;
}

We will define next/prev icons with each image and we are going to use nth-child from CSS3 property.

#slide1:checked ~ #controls label:nth-child(2), 
#slide2:checked ~ #controls label:nth-child(3), 
#slide3:checked ~ #controls label:nth-child(4), 
#slide4:checked ~ #controls label:nth-child(5), 
#slide5:checked ~ #controls label:nth-child(1) {
background: url('../images/next.png') no-repeat;
float: right;
display: block;
background-color:#ef023f;
}
#slide1:checked ~ #controls label:nth-child(5),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4) {
background: url('../images/prev.png') no-repeat;
float: left;
display: block;
background-color:#ef023f;
}

Add Animation

The animation also an important factor because it appeals the user and forces the user to view more images in a slideshow. We are going to take advance of CSS3 animations and use the properties like transform and transition.

#cc-slides .inner {
-webkit-transform: translateZ(0);
-webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
}
#cc-slider {
-webkit-transform: translateZ(0);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#controls label{
-webkit-transform: translateZ(0);
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
-o-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
}
#slide1:checked ~ #cc-slides article:nth-child(1) .cctooltip,
#slide2:checked ~ #cc-slides article:nth-child(2) .cctooltip,
#slide3:checked ~ #cc-slides article:nth-child(3) .cctooltip,
#slide4:checked ~ #cc-slides article:nth-child(4) .cctooltip,
#slide5:checked ~ #cc-slides article:nth-child(5) .cctooltip {
opacity: 1;
-webkit-transition: all 1s ease-out 0.6s;
-moz-transition: all 1s ease-out 0.6s;
-o-transition: all 1s ease-out 0.6s;
transition: all 1s ease-out 0.6s;
}

Update: Method of Adding More Images into Slideshow

After getting your feedback I plan to explain the method to add more images into Slider, so let’s have to look how we can do that.

First of all, You need to define extra input type radio button in the radio button list Have a look how the code will look like after adding one more input type radio.

<input checked="checked" name="cc-slider" id="slide1" type="radio">
<input name="cc-slider" id="slide2" type="radio">
<input name="cc-slider" id="slide3" type="radio">
<input name="cc-slider" id="slide4" type="radio">
<input name="cc-slider" id="slide5" type="radio">
<input name="cc-slider" id="slide6" type="radio">

Next thing to add image and all you need to add another set of following HTML. See below an example.

<article>
<div class="cctooltip">
<h3>Fashion / Sport / Photography</h3>
<h4>By <a href="#">codeconvey</a></h4>
</div>
<img src="images/slide-6.jpg"> 
</article>

Last change is that, You have to put one another control and active. After adding your code will look this:

<div id="controls">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
<label for="slide5"></label>
<label for="slide6"></label>
</div>

Now we need to edit CSS file. As now we will have 6 images in the slider so we should require adjusting the width of the slider. See below what need changing in the CSS.

1) First, We modify the width 500% into 600% because early we have five images so I set into 500% but now it have six pictures in the slider, so we placed into 600%. As you add more images, you should need to set the width according to numbers of photos. For example, if there are seven images then the width will be 700%.

#cc-slides .inner {
width: 500%;
line-height: 0;
}

2) The point number #2 is to edit #cc-slides and change width 20% into 16.6667% for 6 pictures. This change work according to simple formula ie 100% divided into number of images (100% / 6 = 16.6667%).

#cc-slides article {
/* Change 20% into 16.6667% */
width: 16.6667%;
/*width: 20%;*/
float: left;
}

Note: If you know how to used firebug then it will easy for you to adjust the width of the slider. You can use firefox and install firebug addon which helps you to check what width require for what number of the image.

3) The third thing we need to do is to add another element for the radio button which animation new slider image and also to make sure it should work by click on next or bullet navigation. See below code example.

* Added new check value for slide 6*/
#slide6:checked ~ #cc-slides .inner { margin-left:-500%; }

4) We also make sure the tooltip also work on newly added slider image, so we have to add the following code in appropriate place.

/* Added new tooltip for slider6 */
#slide6:checked ~ #cc-slides article:nth-child(6) .cctooltip {
opacity: 1;
-webkit-transition: all 1s ease-out 0.6s;
-moz-transition: all 1s ease-out 0.6s;
-o-transition: all 1s ease-out 0.6s;
transition: all 1s ease-out 0.6s;
}

5) Finally, The last but bit complicated change in CSS. We need to change the Slide Position and need to edit :nth-child numbers. We need to add :nth-child for Next/Previous controls. let’s first have look change for next slide arrow.

We currently have following code.

/* For 5 Slider images*/
/*#slide1:checked ~ #controls label:nth-child(2),
#slide2:checked ~ #controls label:nth-child(3),
#slide3:checked ~ #controls label:nth-child(4),
#slide4:checked ~ #controls label:nth-child(5),
#slide5:checked ~ #controls label:nth-child(1) {
background: url('../images/next.png') no-repeat;
float: right;
margin: 0 10px 0 0;
display: block;
background-color:#ef023f;
}*/

Now we need to change above code with the following code.

/* For 6 Slider images*/
#slide1:checked ~ #controls label:nth-child(2),
#slide2:checked ~ #controls label:nth-child(3),
#slide3:checked ~ #controls label:nth-child(4),
#slide4:checked ~ #controls label:nth-child(5),
/* New Value Added*/
#slide5:checked ~ #controls label:nth-child(6),
#slide6:checked ~ #controls label:nth-child(1) {
background: url('../images/next.png') no-repeat;
float: right;
margin: 0 10px 0 0;
display: block;
background-color:#ef023f;
}

After changing Next arrow now, we have to change right arrow slide.

/* For 5 Slider images*/
/*#slide1:checked ~ #controls label:nth-child(5),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4) {
background: url('../images/prev.png') no-repeat;
float: left;
margin: 0 0 0 17px;
display: block;
background-color:#ef023f;
}*/
/* For 6 Slider images*/
#slide1:checked ~ #controls label:nth-child(6),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4),
#slide6:checked ~ #controls label:nth-child(5) {
background: url('../images/prev.png') no-repeat;
float: left;
margin: 0 0 0 17px;
display: block;
background-color:#ef023f;
}

Final Words

I hope this will help you to add more images in the Image Slider and feel free to play with it and try to make it better. I want other people to help each other by comment below.

The graphic used in this article are from the www.flickr.com

If you like it then you may also look for the gallery solution, You can see our Fullscreen Image Gallery Which made by using only CSS3 and HTML5. If you have another example of css image slideshow, please share in below comment section to help others.

Feedbacks 28

  1. I have a question about this slider and Android devices. Is there a way to make it work on Android? It works great everywhere else, so I’d love to be able to keep it, if it can be fixed for Android. Can you help?

      1. It’s the Samsung Galaxy SIII. What happens is when you click on the arrows, the slider does nothing and the arrow itself disappears. Thank you so much for looking into it.

  2. Can you please explain the process of adding more slides? I came across a similar code to this one from another person, but the way to add more slides and still make things look the same was wayy complicated. I’m hoping yours doesn’t end up like that either!

  3. I successfully implemented this code. However, the CCToolTip for Slide 7->8 is missing, and Slide 9’s CCToolTip is shifted poorly. I have 12 images in total and did 1200% and 8.33% Could you suggest why Slide 7->8 is missing CCTooltip H3 showing up?? Please help

  4. HI, is there any way we can use autoplay ? as it is not always that people uses navigation so i want to scroll images automatically

      1. hi can you please guide me to some direction and to which class i have to add animation? i am an auditor by education with a little knowledge of CSS so i have no idea of these animations.

        Best Regards

  5. and just for your info if any one download this code it will not responsive, i replaced css files with demo file css to make it work

Leave a Reply

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