Код html:
<div id="slider">
<div class="slides">
<!-- First slide -->
<div class="slider">
<div class="content">
<div class="content-txt">
<p class="price">$145,99</p>
<h2>Pink Shoes<br>2013 Collection</h2>
<p class="desc">Nunc non fermentum nunc. Sed ut ante eget leo tempor consequat sit amet eu orci. Donec dignissim dolor eget..</p>
</div>
</div>
<div class="images">
<img src="img/top-img.png">
</div>
</div>
<!-- Second slide -->
<div class="slider">
<div class="content">
<div class="content-txt">
<p class="price">$145,99</p>
<h2>Pink Shoes<br>2013 Collection</h2>
<p class="desc">Nunc non fermentum nunc. Sed ut ante eget leo tempor consequat sit amet eu orci. Donec dignissim dolor eget..</p>
</div>
</div>
<div class="images">
<img src="img/top-img.png">
</div>
</div>
<!-- Third slide -->
<div class="slider">
<div class="content">
<div class="content-txt">
<p class="price">$145,99</p>
<h2>Pink Shoes<br>2013 Collection</h2>
<p class="desc">Nunc non fermentum nunc. Sed ut ante eget leo tempor consequat sit amet eu orci. Donec dignissim dolor eget..</p>
</div>
</div>
<div class="images">
<img src="img/top-img.png">
</div>
</div>
<!-- Fourth slide -->
<div class="slider">
<div class="content">
<div class="content-txt">
<p class="price">$145,99</p>
<h2>Pink Shoes<br>2013 Collection</h2>
<p class="desc">Nunc non fermentum nunc. Sed ut ante eget leo tempor consequat sit amet eu orci. Donec dignissim dolor eget..</p>
</div>
</div>
<div class="images">
<img src="img/top-img.png">
</div>
</div>
<!-- Fourth slide -->
<div class="slider">
<div class="content">
<div class="content-txt">
<p class="price">$145,99</p>
<h2>Pink Shoes<br>2013 Collection1</h2>
<p class="desc">Nunc non fermentum nunc. Sed ut ante eget leo tempor consequat sit amet eu orci. Donec dignissim dolor eget..</p>
</div>
</div>
<div class="images">
<img src="img/top-img.png">
</div>
</div>
</div>
<div class="switch">
<ul>
<li>
<div class="on"></div>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
css:
/* Slider */
#slider{
width:100%;
height:460px;
position:relative;
overflow:hidden;
}
@keyframes load{
from{left:-100%;}
to{left:0;}
}
.slides{
width:400%;
height:100%;
position:relative;
-webkit-animation:slide 37.5s infinite;
-moz-animation:slide 37.5s infinite;
animation:slide 37.5s 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:100%;
}
/* Contents */
.content{
width:100%;
height:100%;
position:absolute;
overflow:hidden;
}
.content-txt{
margin-top: 70px;
margin-left:860px;
float:left;
position:relative;
-webkit-animation:content-s 10s infinite;
-moz-animation:content-s 10s infinite;
animation:content-s 10s infinite;
}
.content-txt h2{
font-weight: lighter;
font-size:40px;
color:#242424;
text-align:left;
padding-bottom:10px;
padding-top: 10px;
}
.content-txt .desc{
width: 390px;
font-size:20px;
font-weight: lighter;
color:#242424;
text-align:left;
}
.content-txt .price{
display: block;
height: 67px;
width: 67px;
background-color: #57c5a0;
line-height: 67px;
text-align: center;
}
/* Switch */
.switch{
width:1000px;
height:10px;
position:absolute;
bottom:50px;
z-index:99;
left:30px;
}
.switch > ul{
list-style:none;
}
.switch > ul > li{
width:195px;
height:10px;
background:#000;
float:left;
margin-right:5px;
cursor:pointer;
}
.switch > ul > li:hover{
.content-txt{
-webkit-animation:content-s 10s infinite;
-moz-animation:content-s 10s infinite;
animation:content-s 10s infinite;
}
}
.switch ul{
overflow:hidden;
background-color: #2e2e2e;
}
.on{
width:90%;
height:65%;
top: 1.5px;
background:#57c5a0;
position:relative;
-webkit-animation:on 37.5s infinite;
-moz-animation:on 37.5s infinite;
animation:on 37.5s 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%;
}
100%{
margin-left:-400%;
}
}*/
@-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%{top:-1420px;}
5%{top:0px;}
10%{top:0px;}
15%{top:0px;}
30%{top:0px;}
40%{top:0px;}
50%{top:0px;}
60%{top:0px;}
70%{top:0px;}
80%{top:-1420px;}
90%{top:-1420px;}
100%{top:-1420px;}
}
@keyframes content-s{
0%{top:-80px;}
5%{top:0px;}
10%{top:0px;}
15%{top:0px;}
30%{top:0px;}
40%{top:0px;}
50%{top:0px;}
60%{top:0px;}
70%{top:0px;}
80%{top:-1420px;}
90%{top:-1420px;}
100%{top:-1420px;}
}
@-webkit-keyframes on{
0%,100%{
margin-left:10px;
}
21%{
margin-left:10px;
}
25%{
margin-left:210px;
}
46%{
margin-left:210px;
}
50%{
margin-left:410px;
}
71%{
margin-left:410px;
}
75%{
margin-left:610px;
}
96%{
margin-left:610px;
}
98%{
margin-left:820px;
}
}
@keyframes on{
0%,100%{
margin-left:10px;
}
21%{
margin-left:10px;
}
25%{
margin-left:210px;
}
46%{
margin-left:210px;
}
50%{
margin-left:410px;
}
71%{
margin-left:410px;
}
75%{
margin-left:610px;
}
96%{
margin-left:610px;
}
98%{
margin-left:820px;
}
}
Скачал такой слайдер на css. В исходном 4 слайда, никак не могу понять как добавить туда пятый, и что бы слайды переключались по щелчку в навигации.
Средний
