Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]slider
Forum PHP.pl > Forum > Przedszkole
korgan
Kod
<div id="slider1">

                  <div id="cont-slider">

                          <div class="przesun">e</div>


                           <div class="przesun">d</div>


                 </div>

        </div>





Kod
#slider1{

position:absolute;
bottom:50px;
width:100%;
height:100px;
background-color:white;
padding:5px;


}



#cont-slider{

overflow:hidden;
    width:600px;
    height:100px;
    background-color:white;
    border:1px solid black;
    margin:0 auto;
    
}

.przesun{
float:left;
position:relative;

margin-left:1px;
-webkit-animation: animation 20s infinite;
-webkit-animation-timing-function: linear;
width:100px;
height:100px;
background-color:red;


}

@-webkit-keyframes animation {
    0% {left:-100px;}
    
    100% {left:600px;}
}





Da się jakoś w samym css zrobić żeby jeden element w slajderze znikał i pojawiał się po drugiej stronie element po elemencie a nie jak jest teraz w kodzie że się grupują i są jako jeden element ?
Mega_88
Nie wiem dokładnie o co Ci chodzi, ale możesz chyba pokombinować z animation: http://www.w3schools.com/css/css3_animations.asp

I bawić się czasem IN/OUT
korgan
Wiem że można zrobić tak że każdy element .przesun będzie indywidualny i nadać każdemu inny czas delay ale to wymusza żeby żeby cały ten slider był statyczny.(mam na myśli obliczanie opóźnienia od drogi czyli pikseli jaką przebędzie ) mi bardziej chodzi o jakiś pomysł żeby zrobić to RWD. Oczywiście można zaprząc do pomocy PHP lub javascript ale mi strasznie zależy żeby to było tylko w css.
trueblue
http://www.google.pl/search?q=pure+css+slider
korgan
Cytat(trueblue @ 11.08.2015, 21:27:26 ) *


Gdyby znalezienie tego było by takie proste kolego to bym nie szukał pomocy na forum.
Najwyraźniej nie zagłębiłeś się w kod który podałem i efekt który poszukuje.
Wszystkie przykłady które są w google które łaskawie mi podałeś zawierają inny typ sladeru.
trueblue
Jeden po drugim, jak to opisałeś: http://csscience.com/responsiveslidercss3/
Wyszukane z linku powyżej.
Jeśli to nie to czego oczekujesz, to proponuję abyś oparł post o więcej szczegółów.
korgan
Cytat(trueblue @ 11.08.2015, 21:53:06 ) *
Jeden po drugim, jak to opisałeś: http://csscience.com/responsiveslidercss3/
Wyszukane z linku powyżej.
Jeśli to nie to czego oczekujesz, to proponuję abyś oparł post o więcej szczegółów.


Jakbyś skopiował mój kod to byś widział o co mi chodzi.
W przykładzie który podałeś jest jeden element na ekranie który zmienia się na drugi.
Mi chodzi żeby elementy przesuwały się cały czas liniowo kolo siebie po dotarciu do końca linii jeden pojawiał się na początku w sposób cykliczny . Można to zrobić tak że każdy element jest ustawiony jako inny id="name" i nadać im inny czas opóźnienia. (ale nie o to mi chodzi)

Dokładnie chodzi mi o taki slaider jak na stronie https://www.przelewy24.pl/ (dokładnie ten gdzie jest lista banków i sposobów płatności ) chodzi mi o ten slaider z bankami .

Drugim przykładem jest http://lowcygier.pl/ śledź okazje live
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.