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.
