Pure CSS3 Slider
Today I’ll tell you about a remarkable thing that you can implement with CSS3 – it’s a slider. I think you may have noticed that some time ago was very popular variety of sliders, and many chose their decision to use jQuery easySlider example. But it appears the same tasks can be implemented using pure CSS3, today I will tell you exactly how this can be done.
Here are samples and downloadable package:
Live Demo
[sociallocker]
download in package
[/sociallocker]
Ok, download the example files and lets start coding !
Step 1. HTML
Here are html source code of our demo. Pay attention how we built our slider. To implement the desired effect – I’ve put our slides followed one another (float: left). And put the correct links.
index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>Pure CSS3 Slider | Dev School</title>
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/slider.css" type="text/css" media="screen">
</head>
<body>
<header>
<h2>Pure CSS3 Slider</h2>
<a href="https://dev-school.net/pure-css3-slider/" class="stuts">Back to original tutorial on <span>Dev School</span></a>
</header>
<div class="container">
<div class="slider">
<span id="root"></span>
<span id="parent1"></span>
<span id="parent2"></span>
<span id="parent3"></span>
<span id="child1"></span>
<span id="child2"></span>
<span id="subchild1"></span>
<div id="tabs">
<dl>
<dd>
<a class="fwd" href="#parent1">Parent #1</a>
<a class="fwd" href="#parent2">Parent #2</a>
<a class="fwd" href="#parent3">Parent #3</a>
</dd>
</dl>
<dl class="parent1">
<dd>
<a class="fwd" href="#child1">Child #1#1</a>
<a class="fwd" href="#child2">Child #1#2</a>
<a href="#">Child #1#3</a>
<a href="#">Child #1#4</a>
<a href="#">Child #1#5</a>
</dd>
<dd><a href="#root">Back</a></dd>
</dl>
<dl class="parent2">
<dd>
<a href="#">Child #2#1</a>
<a href="#">Child #2#2</a>
<a href="#">Child #2#3</a>
<a href="#">Child #2#4</a>
<a href="#">Child #2#5</a>
</dd>
<dd><a href="#root">Back</a></dd>
</dl>
<dl class="parent3">
<dd>
<a href="#">Child #3#1</a>
<a href="#">Child #3#2</a>
<a href="#">Child #3#3</a>
<a href="#">Child #3#4</a>
<a href="#">Child #3#5</a>
</dd>
<dd><a href="#root">Back</a></dd>
</dl>
<dl class="child1">
<dd>
<a class="fwd" href="#subchild1">SubChild #1#1</a>
<a href="#">SubChild #1#2</a>
<a href="#">SubChild #1#3</a>
<a href="#">SubChild #1#4</a>
<a href="#">SubChild #1#5</a>
</dd>
<dd><a href="#parent1">Back</a></dd>
</dl>
<dl class="child2">
<dd>
<a href="#">SubChild #2#1</a>
<a href="#">SubChild #2#2</a>
<a href="#">SubChild #2#3</a>
<a href="#">SubChild #2#4</a>
<a href="#">SubChild #2#5</a>
</dd>
<dd><a href="#parent1">Back</a></dd>
</dl>
<dl class="subchild1">
<dd>
<a href="#">Links #1</a>
<a href="#">Links #2</a>
<a href="#">Links #3</a>
</dd>
<dd><a href="#child1">Back</a></dd>
</dl>
</div>
</div>
</div>
</body>
</html>
Step 2. CSS
Here are the CSS styles of our slider. Maybe you’ve noticed – that in our html we have two CSS files: layout.css and menu.css. The first file (layout.css) contain the styles of our demo page. We will not publish these styles in this article, but if you wish – you can find these styles in the package.
css/slider.css
.slider {
background-color: #FFFFFF;
border: 1px solid #000000;
margin: 50px auto;
overflow: hidden;
padding: 10px;
position: relative;
width: 200px;
}
.slider span {
display:none
}
#tabs {
background-color: #FFFFFF;
margin-left: 0;
overflow: hidden;
width: 2000px;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
}
#tabs dl {
float: left;
height: 300px;
margin: 0;
opacity: 0;
padding: 0;
position: relative;
width: 200px;
}
#tabs dl:first-child {
opacity:1;
}
#tabs dl dd a.fwd {
background-color:#C8CEFF;
}
#tabs dl dd a {
background-color: #F4F5FE;
color: #000000;
display: block;
font-size: 18px;
line-height: 32px;
margin: 10px;
text-align: center;
text-decoration: none;
border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1);
-moz-box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1);
-ms-box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1);
-o-box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1);
-webkit-box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1);
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
}
#tabs dl dd:first-child {
height: 250px;
overflow: auto;
border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
-webkit-border-radius:5px;
}
#tabs dl dd a:hover {
box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5);
-moz-box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5);
-webkit-box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5);
}
#root:target ~ #tabs {
margin-left:0;
}
#parent1:target ~ #tabs {
margin-left:-200px;
}
#parent2:target ~ #tabs {
margin-left:-400px;
}
#parent3:target ~ #tabs {
margin-left:-600px;
}
#child1:target ~ #tabs {
margin-left:-800px;
}
#child2:target ~ #tabs {
margin-left:-1000px;
}
#subchild1:target ~ #tabs {
margin-left:-1200px;
}
#parent1:target ~ #tabs .parent1 {
opacity:1;
}
#parent2:target ~ #tabs .parent2 {
opacity:1;
}
#parent3:target ~ #tabs .parent3 {
opacity:1;
}
#child1:target ~ #tabs .child1 {
opacity:1;
}
#child2:target ~ #tabs .child2 {
opacity:1;
}
#subchild1:target ~ #tabs .subchild1 {
opacity:1;
}
Live Demo
Conclusion
Looks great, isn’t it? If you have got any good ideas you would like to share, be sure to drop those in the comments as well. Good luck!