How to Make a Cool Slider Using Only CSS3 & HTML

Written by Jai
Published On January 13, 2014
45 Comments Leave a Comment

css3-html-slider

If we talk about Image Sliders, there are multiple times when you are confused and wondering as to which Image Slider to integrate in your website. Usually, people go on the Internet, search for a Image Slider script that most probably suits their taste, download it, and try to integrate it. Almost all of these Image Sliders are built using CSS, HTML and one or the other JavaScript libraries like JQuery. If you are not very experienced with such a task, you may have a very hard time to make the Slider look and behave like you want it to do. And if you are trying to integrate this into WordPress, you will go through hell if some plugin conflicts with your Slider scripts.

So, today I will show you how to make a cool looking Image Slider using only CSS3 and HTML. You can forget about using any kind of JavaScript or any conflicts with your existing plugins.

 HTML

First, we will write some HTML for the controls and images. This is really simple to understand as its only a bunch of radio buttons and images that are arranged in a list. Everything is wrapped in a div called slider and the images list is wrapped in another div called sliderinner. The real magic will happen through the CSS code which will be stored in another file called sliderstyle.css referenced in the beginning of this code. Make sure to change the image paths if you are using your own images. Copy the following code into a HTML file and save it with any name.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 & HTML Slider</title>
<link href="sliderstyle.css" type="text/css" rel="stylesheet">
</head>

<body>
<h1>Pure CSS3 & HTML Slider</h1>
   <div class="slider"> 
        <input type="radio" id="control1" name="controls" checked="checked"/>
        <label for="control1"></label>
        <input type="radio" id="control2" name="controls"/>
        <label for="control2"></label>
        <input type="radio" id="control3" name="controls"/>
        <label for="control3"></label>
        <input type="radio" id="control4" name="controls"/>
        <label for="control4"></label>
        <input type="radio" id="control5" name="controls"/>
        <label for="control5"></label>
        <div class="sliderinner">
            <ul>
                <li>
                    <img src="images/1.jpg" />
                    <div class="description">

                        <div class="description-text">
                            <h2>Slideshow Title 1</h2>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="images/2.jpg" />
                    <div class="description">

                        <div class="description-text">
                            <h2>Slideshow Title 2</h2>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="images/3.jpg" />
                    <div class="description">

                        <div class="description-text">
                            <h2>Slideshow Title 3</h2>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="images/4.jpg" />
                    <div class="description">

                        <div class="description-text">
                            <h2>Slideshow Title 4</h2>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="images/5.jpg" />
                    <div class="description">

                        <div class="description-text">
                            <h2>Slideshow Title 5</h2>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div><!--slider-->
</body>
</html>

CSS

Make another file called sliderstyle.css and paste the following code into it :-

 @import url(https://fonts.googleapis.com/css?family=Archivo+Narrow);

* { margin: 0; padding: 0; }

body {background-color:#666;}
h1 {color:#333; text-shadow:1px 1px #999; font-size:40px; font-family:Archivo Narrow; margin:40px; text-align:center;}
.slider {
    display: block;
    height: 320px;
    min-width: 260px;
    max-width: 640px;
    margin: auto;
    margin-top: 20px;
    position: relative;
}

.sliderinner {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.sliderinner>ul {
    list-style: none;
    height: 100%;
    width: 500%;
    overflow: hidden;
    position: relative;
    left: 0px;
    -webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
}

.sliderinner>ul>li {
    width: 20%;
    height: 320px;
    float: left;
    position: relative;
}

.sliderinner>ul>li>img {
    margin: auto;
    height: 100%;
}

.slider input[type=radio] {
    position: absolute;
    left: 50%;
    bottom: 15px;
    z-index: 100;
    visibility: hidden;
}

.slider label {
    position: absolute;
    left: 50%;
    bottom: -45px;
    z-index: 100;
    width: 12px;
    height: 12px;
    background-color:#ccc;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    cursor: pointer;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
    box-shadow: 0px 0px 3px rgba(0,0,0,.8);
    -webkit-transition: background-color .2s;
    -moz-transition: background-color .2s;
    -o-transition: background-color .2s;
    transition: background-color .2s;
}

.slider input[type=radio]#control1:checked~label[for=control1] { background-color: #333; }
.slider input[type=radio]#control2:checked~label[for=control2] { background-color: #333; }
.slider input[type=radio]#control3:checked~label[for=control3] { background-color: #333; }
.slider input[type=radio]#control4:checked~label[for=control4] { background-color: #333; }
.slider input[type=radio]#control5:checked~label[for=control5] { background-color: #333; }
.slider label[for=control1] { margin-left: -36px }
.slider label[for=control2] { margin-left: -18px }
.slider label[for=control4] { margin-left: 18px }
.slider label[for=control5] { margin-left: 36px }
.slider input[type=radio]#control1:checked~.sliderinner>ul { left: 0 }
.slider input[type=radio]#control2:checked~.sliderinner>ul { left: -100% }
.slider input[type=radio]#control3:checked~.sliderinner>ul { left: -200% }
.slider input[type=radio]#control4:checked~.sliderinner>ul { left: -300% }
.slider input[type=radio]#control5:checked~.sliderinner>ul { left: -400% }

.description {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    font-family:Archivo Narrow;
    z-index: 1000;
}
.description-text {
    background-color: rgba(0,0,0,.8);
    padding:10px;
    top: 0;
    z-index: 4;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    -o-transition: opacity .2s;
    transition: opacity .2s;
    color: #fff;
}

Make sure that both your HTML and CSS files are in the same place. Also, check the image paths. The optimum image size for this slider is 640×320 pixels. You can change it but you will have to change it in the CSS files also. Here is a live working demo of the slider in action and also link for you to download the demo files :-
Slider Demo
Download Files

What Next?

You can try integrating this slider into WordPress and let me know if you are able to do it. Also, send any comment or feedback you have.

About Jai

I am a blogger and a web designer.

45 replies on “How to Make a Cool Slider Using Only CSS3 & HTML”

Joshua A. Price Reply

I was very encouraged to find this site. The reason being that this is such an informative post. I wanted to thank you for this informative analysis of the subject. I definitely savored every little bit of it and I submitted your site to some of the biggest social networks so others can find your blog.

visit This website Reply

magnificent issues altogether, you simply won a new reader.
What would you recommend about your publish that you just made a
few days in the past? Any certain?

{Toy Review Videos Reply

{Hello love your {Site I took a few minutes to read some of your posts! I was hoping you would visit my page and do the same!! We have been opening a ton of awesome toys over on my {Channel! Check out my page and see some of my work!

KT Reply

Thanks for the codes, it seems lots of people asking the same questions autoplay.

Anyone found out what to add to get it autoplay?

David Reply

Thanks for this tutorial, the slider looks great. But is there a way to add labels to the radio-buttons? The label-tag doesn’t seem to work properly…

Yasmine Reply

Is it possible to have the captions placed below the image? I do not want the captions to cover the images at all. Thanks!

Guy Haglund Reply

Thanks Jai Nischal — I’m working on modernizing my website and I want the portal page to have a loop of images sliding in as seems to be pretty common these days. The effect of your demo is exactly what I want, but I want it to be without the radio buttons. Will this require some Javascript? I have a pretty good grasp of basic programming practice. Can you give me some hints?
Thanks again!

dailytut Reply

This will come very handy now. Thank you and keep bringing more css tutorials please. it will be very helpful for me as i am just started with CSS3 via codecademy.

Robin.

Luko Reply

We’re talking about transition property on this. To make it start automatically you have to use animation css property with hscroll for example.

cheers

Susan Meko Reply

Nice work and the demo works in Mozilla normal and mobile both. But is it compatible with all browsers?
Otherwise it is really good work done. Can I use it (with customizations) on my coming projects?

Regards
Susan Meko

Steph Reply

Thank you very much for this code, really appreciate it as I am only learning web design. I have changed the width of the slider to be the same size as my images, but now the alignment is out by 5 px to the left and when it slides over to the next image the last 5px of the previous image is displaying. What did i do wrong and how do i fix it?

Thank you!

Yoer Reply

Thanks for your tutorial, but image changes aren’t auto,
for example, every 3 seconds, image 1 will slide to image 2. So we don’t need push button for every changes

JaiBy Post Author Reply

This demo is for the purpose of showing what can be achieved through CSS/HTML. For mobile, you will have to optimize some more.

DMGoncalves Reply

For the record, it worked fine for me on my iPhone 5c / Safari.

The default Android browser is not the best. Chrome may work better (unfortunately I do not have time to test this now).

Nice demo!

Leave a Reply

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