Slider się ścina

pytanie zadane 29 kwietnia 2017 w HTML i CSS przez leemish Użytkownik (780 p.)

Cześć, slider po pokazaniu wszystkich fotek na chwilę (sekundę) łapie jakby przerwę, po czym zaczyna od początku. Psuje to ogólne wrażenie płynności. Jak to naprawić? :)

<div id="slider">
<figure>
<img src="images/slider/downtown.jpg">
<img src="images/slider/peak.jpg">
<img src="images/slider/training.jpg">
<img src="images/slider/blog.jpg">
</figure>
</div>

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
  padding-top: 100px;
  
  position: relative;
  width: 500%;
  text-align: left;
  font-size: 0;
  animation: 15s slidy infinite;

2 odpowiedzi

odpowiedź 29 kwietnia 2017 przez dervil Gaduła (3,030 p.)
edycja 29 kwietnia 2017 przez dervil

nie jestem pewien, ja wolę js, dziwne te slide na css, czemu po 2x jest taki sam @keyframes na różnych procentach?

muszę poczytać

komentarz 29 kwietnia 2017 przez marcin99b Szeryf (82,080 p.)

Jest dwa razy taki sam na różnych procentach, żeby zatrzymanie w X pozycji trwało tyle, co przejścia między pozycjami
Jest

stoi
ruch
stoi
ruch

itd

komentarz 29 kwietnia 2017 przez dervil Gaduła (3,030 p.)
edycja 29 kwietnia 2017 przez dervil

trochę pokombinowałem , ale nie mam więcej czasu.

zrobiłem tak i jest SUPER

musisz dodać pierwszego slajda jako 5

<div id="slider">
<figure>
<img src="http://silde1.png">
<img src="http://slide2.gif">
<img src="http://slide3.png">
<img src="http://slide4.gif">
<img src="http://SLIDE1.png"> /*TU DODAJ SLAJDA 1*/
</figure>
</div>

@keyframes slidy {
0% { left: 0%; }
20%{ left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%;}
100% { left: -400%;}
}
 
body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
  padding-top: 100px;
   
  position: relative;
  width: 500%;
  text-align: left;
  font-size: 0;
  animation: 10s slidy infinite;

I ŚMIGA JAK TALALA ;)

komentarz 29 kwietnia 2017 przez dervil Gaduła (3,030 p.)
edycja 29 kwietnia 2017 przez dervil

w tym twoim jest nie dopasowana ilość slidów do % pokombinuj, lub zrób na 5 tak jak ci napisałem, pozdro

odpowiedź 29 kwietnia 2017 przez marcin99b Szeryf (82,080 p.)

Jeśli nie chcesz aby cofał, nie dawaj animation: 15s slidy INFINITE;
Jeśli chcesz aby wracał płynnie do punktu startowego, w animacji (@keyframes) ustaw koniec taki sam jak początek, bo teraz przeskakuje

komentarz 29 kwietnia 2017 przez leemish Użytkownik (780 p.)

możesz odrobinę jaśniej? :)

jestem początkujący w kwestii animacji, gdzie i co muszę dopisać?

komentarz 29 kwietnia 2017 przez marcin99b Szeryf (82,080 p.)

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

W 100% powinno być to, co jest w 0%, żeby się zapętliło, wtedy będzie się cofać (szybki płynny przejazd do punktu startu)
Teraz nagle przeskakuje, bo to przejście z końca do startu nie jest w żadnej animacji, nie jest podane ile ma trwać, więc przeskakuje.

komentarz 29 kwietnia 2017 przez leemish Użytkownik (780 p.)

ok, jest już nieźle, ale slider "wraca" do początku przez całość, na zasadzie pokazu slajdów puszczanego od tyłu. Jak zrobić żeby działało to na zasadzie pętli?

komentarz 1 maja 2017 przez marcin99b Szeryf (82,080 p.)

W samym html+css będzie ciężko, w js dałoby się w ten sposób, że np dodajesz elementy przed swój i usuwasz za nim, albo każdy następny jest generowany dopiero, kiedy do niego przechodzisz (jest dużo sposobów)
Jak chcesz, możesz spróbować tego LINK (bootstrap)