dodacie mi do tego slidera napisanego w html i css auto przewijanie obrazków np co 5 sec?
<html>
<body>
<ul class="slider">
<li>
<input type="radio" id="slide1" name="slide" checked>
<label for="slide1"></label>
<img src="http://www.hdwallpapersinn.com/wp-
content/uploads/2014/07/HD-Wallpapers-1080p.jpg">
</li>
<li>
<input type="radio" id="slide2" name="slide">
<label for="slide2"></label>
<img src="http://wallpaperfeed.com/wp-
content/uploads/2013/12/sunbeams-on-tree-nature-wallpaper-hd.jpg">
</li>
<li>
<input type="radio" id="slide3" name="slide">
<label for="slide3"></label>
<img src="http://newevolutiondesigns.com/images/freebies/hd-
wallpaper-10.jpg">
</li>
<li>
<input type="radio" id="slide4" name="slide">
<label for="slide4"></label>
<img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcSUSMuckoiLY8Pz1Hif87FGSXn9INnTnakJq4r78ZF-
PhkeM2DI">
</li>
</ul>
<style>
.slider {
background-color: #fff;
box-shadow: inset 0 0 2px hsla(0,0%,0%,.2),
0 3px 1px hsla(0,0%,100%,.75),
0 -1px 1px 2px hsla(0,0%,0%,.1);
height: 37em;
left: 13%;
margin: -8em -13em;
padding: .5em;
position: absolute;
top: 36%;
width: 114em;
}
.slider:before {
background-color: #22130c;
bottom: -2.5em;
box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,.2),
inset 0 -2px 1px hsla(0,0%,0%,.4),
0 5px 50px hsla(0,0%,0%,.25),
0 20px 20px -15px hsla(0,0%,0%,.2),
0 30px 20px -15px hsla(0,0%,0%,.15),
0 40px 20px -15px hsla(0,0%,0%,.1);
content: '';
left: -2.5em;
position: absolute;
right: -2.5em;
top: -2.5em;
z-index: -1;
}
.slider:after {
background-color: #fff5e5;
bottom: -1.5em;
box-shadow: 0 2px 1px hsla(0,0%,100%,.2),
0 -1px 1px 1px hsla(0,0%,0%,.4),
inset 0 2px 3px 1px hsla(0,0%,0%,.2),
inset 0 4px 3px 1px hsla(0,0%,0%,.2),
inset 0 6px 3px 1px hsla(0,0%,0%,.1);
content: '';
left: -1.5em;
position: absolute;
right: -1.5em;
top: -1.5em;
z-index: -1;
}
.slider li {
box-shadow: 0 -1px 0 2px hsla(0,0%,0%,.03);
list-style: none;
position: absolute;
}
.slider input {
display: none;
}
.slider label {
background-color: #111;
background-image: linear-gradient(transparent, hsla(0,0%,0%,.25));
border: .2em solid transparent;
bottom: .5em;
border-radius: 100%;
cursor: pointer;
display: block;
height: .5em;
left: 24em;
opacity: 0;
position: absolute;
transition: .25s;
width: .5em;
visibility: hidden;
z-index: 10;
}
.slider label:after {
border-radius: 100%;
bottom: -.2em;
box-shadow: inset 0 0 0 .2em #111,
inset 0 2px 2px #000,
0 1px 1px hsla(0,0%,100%,.25);
content: '';
left: -.2em;
position: absolute;
right: -.2em;
top: -.2em;
}
.slider:hover label {
opacity: 1;
visibility: visible;
}
.slider input:checked + label {
background-color: #fff;
}
.slider:hover li:nth-child(1) label {
left: .5em;
}
.slider:hover li:nth-child(2) label {
left: 2em;
}
.slider:hover li:nth-child(3) label {
left: 3.5em;
}
.slider:hover li:nth-child(4) label {
left: 5em;
}
.slider img {
height: 37em;
opacity: 0;
transition: .25s;
width: 114em;
vertical-align: top;
visibility: hidden;
}
.slider li input:checked ~ img {
opacity: 1;
visibility: visible;
z-index: 10;
}
</style>
</body>
bardzo mi na tym zależy.
Użytkownik Alvarosek edytował ten post 26 sierpnia 2014 - 11:27
Należałoby do tego wykorzystać javascript i najprostszy timer.
