How to Make a Cool Slider Using Only CSS3 & HTML
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(http://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.
Jai was awesome to work with. A port of an ASPX/HTML site to Wordpress went seamlessly, and his recreation of our look and feel were fantastic - Kevin Webster
Jai is a talented, creative and an enthusiastic web developer who has worked consistently to deliver high quality websites for my businesses - James Eccles
perfect.
{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!
We advocate reserving up to 6 hours when you’re putting in both Fios Internet and Fios TV providers.
wow
Thanks for the codes, it seems lots of people asking the same questions autoplay.
Anyone found out what to add to get it autoplay?
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…
Electrostatic spray is to use solid powder solvent instead of the liquid form, the high voltage makes powder coating negatively charged, With the help of electrostatic attraction, it is adsorbed on the surface of the workpiece to be coated, it is the coating method obtained after being heated and melted (or cured). Electrostatic spray is a new technology, what the powder coating we used does not contain a solvent and a dispersion medium and other liquid ingredients, when we use it, there is no need of dilution and adjusting the viscosity, itself can not flow, after melting it can flow, it will not like a liquid coating adhered to the surface of the workpiece. Therefore, electrostatic spray coating has the features of high efficiency, excellent film properties, solvent evaporation, little environmental pollution, energy consumption less, simple process, short production cycle, low cost, easy to paint automation etc..
FIPFG coating process can be directly coating the surface of the electrostatic spray products, to be closely integrated with the coating surface with a high degree of protection, good adhesion, anti-aging performance advantages. However, if the powder contains a small amount of PTFE and wax wrinkle agent, it will significantly affect the adhesion of the strip, therefore, we should pay close attention. At present, the technology has been widely used by the electrical industry.
http://www.hgcx.cn/en
To make it start automatically you have to use animation css property with hscroll for example. http://www.casquettemagasin.com/casquette-nba-brooklyn-nets-c-1_4.html
Is there a way to have the slider autoplay?
Is there a way to incorporate left/right arrows as well as set this to auto play?
Hi,
I tried adding this to my WordPress site here: http://www.stableawareness.com.au/
I adjusted the CSS to display slides as 960 x 400, and included the following HTML in my page:
However, only 5 of the the slider navigation circle buttons display. Can you help please?
Is it possible to have the captions placed below the image? I do not want the captions to cover the images at all. Thanks!
How should edit css for 6 images? Help!!!
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!
In order to do that, you should be using a different slider. Search for Bxslider on Google.com. Its a simple script. Read on the website and learn from there. OR, you can learn it here :- http://www.blogohblog.com/create-responsive-wordpress-theme-video-tutorial-1/
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.
Great work! I add more images and edit css and it’s work fine is ther a way to add Next/Prev options and also can we make it auto play ?
It works , but it cannot start automatically
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
nice… very nice invdent
Thanks, it work.
Great script, it work.
Thank you.
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
Very good slider! I like slider which don’t use JAvaScript, like this one:
http://basicuse.net/articles/pl/textile/html_css/creating_an_image_slider_using_only_css3_without_page_scrolling
It seems like all of them use target pseudo-class in CSS3.
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!
It works….good stuff
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
how to make it auto switch between the pic?
Nice…very nice indeed
nice work. css3 and html work is very clear.
thanks again.
what to do for auto slide?
how to add more items (for example 8 items)
would like to know too, tried to expand it, but it works only till the fifth image
I managed to get it to work with more images but its not very efficient. If u still need help, please reply this comment
Great script, it work.
But it cannot automatically sliding, isn’t it ?
Or in my browser only ?
thanks
the mobile experience with this demo is not good.
on my galaxy s3 I couldn’t move on to the next image
This demo is for the purpose of showing what can be achieved through CSS/HTML. For mobile, you will have to optimize some more.
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!