Skocz do zawartości

Alvarosek

Rejestracja: 24 sie 2014
Poza forum Ostatnio: sie 28 2014 13:12
-----

Moje posty

W temacie: Dodanie auto przewijanie obrazków w sliderze wykonanym w html i css

27 sierpnia 2014 - 13:13

google chrome Wersja 36.0.1985.143 m


W temacie: Dodanie auto przewijanie obrazków w sliderze wykonanym w html i css

27 sierpnia 2014 - 12:30

nie działa mi unbreak


W temacie: Dodanie auto przewijanie obrazków w sliderze wykonanym w html i css

26 sierpnia 2014 - 17:44

nie ściagałem js w html to pisałem i css


W temacie: [HTML & CSS]Jak zrobić slider ze strzałkami,automatycznym przewijaniem i...

25 sierpnia 2014 - 10:50

poszukałem na necie i edytowałem go i dodawałem swoje dodatki.

 

jak teraz go zeedytować w html / css by automatycznie się przewijał?

da się ustawić autoplay w html ?


W temacie: [HTML & CSS]Jak zrobić slider ze strzałkami,automatycznym przewijaniem i...

25 sierpnia 2014 - 09:50

dodacie mi do tego slidera automatyczne przewijanie 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>