<!-- Fork me on GitHub ribbon -->
<a href="https://github.com/Elitewares/CSS3-Slider" target="_blank"><img style="position: fixed; top: 0; right: 0; border: 0;z-index:99;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<!-- Header -->
<header>
<nav>
<li> <a href="https://twitter.com/BenSassiAladin" target="_blank">Twitter</a></li>
<li> <a href="https://tn.linkedin.com/in/aladinbensassi" target="_blank">LinkedIn</a> </li>
<select onchange="if (this.value) window.location.href=this.value">
<option value="#"> Default </option>
<option value="#"> Left to Right </option>
<option value="#"> Top to Bottom </option>
<option value="#"> Bottom to Top </option>
<option value="#"> light </option>
</select>
</nav>
</header>
<!-- Slider -->
<div id="slider">
<div class="slides">
<div class="slider">
<div class="legend"></div>
<div class="content">
<div class="content-txt">
<h1>Lorem ipsum dolor</h1>
<h2>Nam ultrices pellentesque facilisis. In semper tellus mollis nisl pulvinar vitae vulputate lorem consequat. Fusce odio tortor, pretium sit amet auctor ut, ultrices vel nibh.</h2>
</div>
</div>
<div class="image">
<img src="https://cdn.stocksnap.io/img-thumbs/960w/VVHE6VHMAW.jpg">
</div>
</div>
<div class="slider">
<div class="legend"></div>
<div class="content">
<div class="content-txt">
<h1>Lorem ipsum dolor</h1>
<h2>Nam ultrices pellentesque facilisis. In semper tellus mollis nisl pulvinar vitae vulputate lorem consequat. Fusce odio tortor, pretium sit amet auctor ut, ultrices vel nibh.</h2>
</div>
</div>
<div class="image">
<img src="https://cdn.stocksnap.io/img-thumbs/960w/AKWVXIXFA8.jpg">
</div>
</div>
<div class="slider">
<div class="legend"></div>
<div class="content">
<div class="content-txt">
<h1>Lorem ipsum dolor</h1>
<h2>Nam ultrices pellentesque facilisis. In semper tellus mollis nisl pulvinar vitae vulputate lorem consequat. Fusce odio tortor, pretium sit amet auctor ut, ultrices vel nibh.</h2>
</div>
</div>
<div class="image">
<img src="https://cdn.stocksnap.io/img-thumbs/960w/TPLJK7JPRR.jpg">
</div>
</div>
<div class="slider">
<div class="legend"></div>
<div class="content">
<div class="content-txt">
<h1>Lorem ipsum dolor</h1>
<h2>Nam ultrices pellentesque facilisis. In semper tellus mollis nisl pulvinar vitae vulputate lorem consequat. Fusce odio tortor, pretium sit amet auctor ut, ultrices vel nibh.</h2>
</div>
</div>
<div class="image">
<img src="https://cdn.stocksnap.io/img-thumbs/960w/XJ2BKV9ASS.jpg">
</div>
</div>
</div>
<div class="switch">
<ul>
<li>
<div class="on"></div>
</li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="container">
<h1> Note </h1>
<h2> The dropdown menu doesn't work in this demo. You need to download the code from github for the full version</h2>
<h1> How to use </h1>
<h2> Choose the version you want to integrate in your website, then link it through your HTML page </h2>
<div class="code">
<span><head></span>
<br>
<div class="space"></div>
... <span><i><!-- Your stuff --></span></i>
<br>
<div class="space"></div>
<span><link rel="</span>stylesheet<span>" href="</span>style/slider-def.css<span>"></span>
<br>
<span></head></span>
</div>
<h2> Then add this structure to your page </h2>
<div class="code">
<span><div id="</span>slider<span>"></span>
<br>
<div class="space"></div>
<span><div class="</span>slides<span>"></span></br>
<br>
<div class="space"></div>
<div class="space"></div>
<span><i><!-- First slide --></span></i>
<br>
<div class="space"></div>
<div class="space"></div>
<span><div class="</span>slider<span>"></span></br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span><div class="</span>legend<span>"></div></span>
<br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span><div class="</span>content<span>"></span>
<br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span><div class="</span>content-txt<span>"></span>
<br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span><h1></span> Your title <span></h1></span>
<br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span><h2></span> Your description <span></h2></span>
<br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span></div></span>
<br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span></div></span>
<br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span><div class="</span>images<span>"></span>
<br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span><img src="</span>ImagePath/ImageName.jpg<span>"></span>
<br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span></div></span>
<br>
<div class="space"></div>
<div class="space"></div>
<span></div></span>
<br>
<br>
<div class="space"></div>
<div class="space"></div>
<span><i><!-- Second slide --></span></i>
<br>
<div class="space"></div>
<div class="space"></div>
<span><div class="</span>slider<span>"></span></br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span><div class="</span>legend<span>"></div></span>
<br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span><div class="</span>content<span>"></span>
<br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span><div class="</span>content-txt<span>"></span>
<br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span><h1></span> Your title <span></h1></span>
<br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span><h2></span> Your description <span></h2></span>
<br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span></div></span>
<br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span></div></span>
<br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span><div class="</span>images<span>"></span>
<br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span><img src="</span>ImagePath/ImageName.jpg<span>"></span>
<br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span></div></span>
<br>
<div class="space"></div>
<div class="space"></div>
<span></div></span>
<br>
<br>
<div class="space"></div>
<div class="space"></div>
<span><i><!-- Third slide --></span></i>
<br>
<div class="space"></div>
<div class="space"></div>
<span><div class="</span>slider<span>"></span></br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span><div class="</span>legend<span>"></div></span>
<br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span><div class="</span>content<span>"></span>
<br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span><div class="</span>content-txt<span>"></span>
<br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span><h1></span> Your title <span></h1></span>
<br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span><h2></span> Your description <span></h2></span>
<br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span></div></span>
<br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span></div></span>
<br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span><div class="</span>images<span>"></span>
<br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span><img src="</span>ImagePath/ImageName.jpg<span>"></span>
<br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span></div></span>
<br>
<div class="space"></div>
<div class="space"></div>
<span></div></span>
<br>
<br>
<div class="space"></div>
<div class="space"></div>
<span><i><!-- Fourth slide --></span></i>
<br>
<div class="space"></div>
<div class="space"></div>
<span><div class="</span>slider<span>"></span></br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span><div class="</span>legend<span>"></div></span>
<br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span><div class="</span>content<span>"></span>
<br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span><div class="</span>content-txt<span>"></span>
<br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span><h1></span> Your title <span></h1></span>
<br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span><h2></span> Your description <span></h2></span>
<br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span></div></span>
<br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span></div></span>
<br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span><div class="</span>images<span>"></span>
<br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span><img src="</span>ImagePath/ImageName.jpg<span>"></span>
<br>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<span></div></span>
<br>
<div class="space"></div>
<div class="space"></div>
<span></div></span>
<br>
<br>
<div class="space"></div>
<span></div></span>
<br>
<span></div></span>
</div>
<h2> Finally add the images and text content and enjoy </h2>
<br>
<h1> CSS files index </h1>
<h3> slider-def.css : Default </h3>
<h3> slider-ltr.css : Left to right </h3>
<h3> slider-ttb.css : Top to bottom </h3>
<h3> slider-btt.css : Bottom to top </h3>
<h3> slider-simp.css : Light </h3>
</div>
<div id="credits">
<p><a href="http://www.aladinbs.com" target="blank">My website</a></p> <a href="https://codepen.io/Eliteware/" target="blank">my other pens</a> | <a href="https://twitter.com/BenSassiAladin" target="blank">My twitter</a></p>
</div>
<footer>
<h1> Opensource your work, knowledge is free </h1>
</footer>
/* Reset */
*{margin:0;padding:0;}
body{
min-width:900px;
}
/* Slider */
#slider{
width:100%;
height:500px;
position:relative;
overflow:hidden;
}
@keyframes load{
from{left:-100%;}
to{left:0;}
}
.slides{
width:400%;
height:100%;
position:relative;
-webkit-animation:slide 30s infinite;
-moz-animation:slide 30s infinite;
animation:slide 30s infinite;
}
.slider{
width:25%;
height:100%;
float:left;
position:relative;
z-index:1;
overflow:hidden;
}
.slide img{
width:100%;
height:100%;
}
.slide img{
width:100%;
height:100%;
}
.image{
width:100%;
height:100%;
}
.image img{
width:100%;
height:auto;
}
/* Legend */
.legend{
border:500px solid transparent;
border-left:800px solid rgba(52, 73, 94, .7);
border-bottom:0;
position:absolute;
bottom:0;
}
/* Contents */
.content{
width:100%;
height:100%;
position:absolute;
overflow:hidden;
}
.content-txt{
width:400px;
height:150px;
float:left;
position:relative;
top:300px;
-webkit-animation:content-s 7.5s infinite;
-moz-animation:content-s 7.5s infinite;
animation:content-s 7.5s infinite;
}
.content-txt h1{
font-family:Arial;
text-transform:uppercase;
font-size:24px;
color:#fff;
text-align:left;
margin-left:30px;
padding-bottom:10px;
}
.content-txt h2{
font-family:arial;
font-weight:normal;
font-size:14px;
font-style:italic;
color:#fff;
text-align:left;
margin-left:30px;
}
/* Switch */
.switch{
width:120px;
height:10px;
position:absolute;
bottom:50px;
z-index:99;
left:30px;
}
.switch > ul{
list-style:none;
}
.switch > ul > li{
width:10px;
height:10px;
border-radius:50%;
background:#333;
float:left;
margin-right:5px;
cursor:pointer;
}
.switch ul{
overflow:hidden;
}
.on{
width:100%;
height:100%;
border-radius:50%;
background:#f39c12;
position:relative;
-webkit-animation:on 30s infinite;
-moz-animation:on 30s infinite;
animation:on 30s infinite;
}
/* Animation */
@-webkit-keyframes slide{
0%,100%{
margin-left:0%;
}
21%{
margin-left:0%;
}
25%{
margin-left:-100%;
}
46%{
margin-left:-100%;
}
50%{
margin-left:-200%;
}
71%{
margin-left:-200%;
}
75%{
margin-left:-300%;
}
96%{
margin-left:-300%;
}
}
@-moz-keyframes slide{
0%,100%{
margin-left:0%;
}
21%{
margin-left:0%;
}
25%{
margin-left:-100%;
}
46%{
margin-left:-100%;
}
50%{
margin-left:-200%;
}
71%{
margin-left:-200%;
}
75%{
margin-left:-300%;
}
96%{
margin-left:-300%;
}
}
@keyframes slide{
0%,100%{
margin-left:0%;
}
21%{
margin-left:0%;
}
25%{
margin-left:-100%;
}
46%{
margin-left:-100%;
}
50%{
margin-left:-200%;
}
71%{
margin-left:-200%;
}
75%{
margin-left:-300%;
}
96%{
margin-left:-300%;
}
}
@-webkit-keyframes content-s{
0%{left:-420px;}
10%{left:0px;}
30%{left:0px;}
40%{left:0px;}
50%{left:0px;}
60%{left:0px;}
70%{left:0;}
80%{left:-420px;}
90%{left:-420px;}
100%{left:-420px;}
}
@-moz-keyframes content-s{
0%{left:-420px;}
10%{left:0px;}
30%{left:0px;}
40%{left:0px;}
50%{left:0px;}
60%{left:0px;}
70%{left:0;}
80%{left:-420px;}
90%{left:-420px;}
100%{left:-420px;}
}
@keyframes content-s{
0%{left:-420px;}
10%{left:20px;}
15%{left:0px;}
30%{left:0px;}
40%{left:0px;}
50%{left:0px;}
60%{left:0px;}
70%{left:0;}
80%{left:-420px;}
90%{left:-420px;}
100%{left:-420px;}
}
@-webkit-keyframes on{
0%,100%{
margin-left:0%;
}
21%{
margin-left:0%;
}
25%{
margin-left:15px;
}
46%{
margin-left:15px;
}
50%{
margin-left:30px;
}
71%{
margin-left:30px;
}
75%{
margin-left:45px;
}
96%{
margin-left:45px;
}
}
@-moz-keyframes on{
0%,100%{
margin-left:0%;
}
21%{
margin-left:0%;
}
25%{
margin-left:15px;
}
46%{
margin-left:15px;
}
50%{
margin-left:30px;
}
71%{
margin-left:30px;
}
75%{
margin-left:45px;
}
96%{
margin-left:45px;
}
}
@keyframes on{
0%,100%{
margin-left:0%;
}
21%{
margin-left:0%;
}
25%{
margin-left:15px;
}
46%{
margin-left:15px;
}
50%{
margin-left:30px;
}
71%{
margin-left:30px;
}
75%{
margin-left:45px;
}
96%{
margin-left:45px;
}
}
/* main */
/* Reset */
a{text-decoration:none;color:inherit;}
html{width:100%;height:100%;}
/* Body */
body{
background:#fff;
}
/* Header */
header{
width:100%;
height:80px;
background:#222;
}
.logo{
width:50px;
height:65px;
position:relative;
top:7.5px;
float:left;
margin-left:5%;
}
.logo img{
width:100%;
height:100%;
}
nav{
width:auto;
height:100%;
float:right;
margin-right:5%;
list-style:none;
}
nav li{
width:auto;
margin-right:20px;
float:left;
}
nav li a{
font-family:Arial;
font-size:16px;
color:#fff;
line-height:80px;
}
nav select{
width:150px;
height:30px;
margin-top:25px;
font-family:Arial;
font-size:14px;
color:#666;
border:2px solid #aaa;
padding-left:10px;
}
nav select:focus{
outline:none;
}
/* Content */
.container{
width:70%;
height:auto;
padding:20px 0;
margin:20px auto;
}
.container h1{
font-family:Arial;
font-size:24px;
color:#222;
text-transform:uppercase;
margin:20px 0;
}
.container h2{
font-family:arial;
font-size:16px;
color:#444;
margin-top:10px;
}
.container h3{
font-family:arial;
font-weight:normal;
font-size:16px;
color:#aaa;
}
.code{
width:600px;
height:auto;
margin:20px auto;
padding:10px 20px;
background:#222;
border-left:10px solid #aaa;
font-family: arial;
font-size:16px;
color:#fff;
}
.code span{
color:#89A978;
}
.space{
width:20px;
height:1px;
float:left;
}
footer{
width:100%;
height:50px;
background:#222;
}
footer h1{
font-family:Arial;
font-weight:normal;
font-size:14px;
color:#fff;
margin-left:5%;
line-height:50px;
}
#credits{
position:relative;
width:100%;
margin: auto;
bottom:0;
margin-bottom:20px;
font-family:'Open Sans', sans-serif;
color:#b297a2;
font-size:10px;
text-transform: uppercase;
text-align : center;
}
#credits a {
color:#b297a2;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.