Slider w css- zasada działania

pytanie zadane 18 sierpnia 2015 w HTML i CSS przez Adam Jakś Dyskutant (8,940 p.)

Witam, chciałbym prosić aby ktoś w wolnej chwili wyjaśnił mi zasadę działania tego slidera:

http://codepen.io/dudleystorey/pen/ehKpi

1) Jak to się dzieje, że slidy się zmieniają.

2) Mechanika działania danej animacji @keyframes.

3) Co to za tag <figure>? Czy równie dobrze może też mieć jakąś inną nazwę?

4) W jaki sposób dodać lub usunąć obrazki, zmienić ich ilość w sliderze.

Pozdrawiam.

4 odpowiedzi

odpowiedź 18 sierpnia 2015 przez DL TD Nałogowiec (36,710 p.)
wybrane 18 sierpnia 2015 przez Adam Jakś

Najlepsza

To bardzo proste, już tłumaczę:

Zacznijmy od HTML:

Mamy diva slider w CSS ma on atrybut overflov i zawartość jego to hiden. Czyli ukrywa niemieszczące się elementy.

Potem w tagu figure umieszczasz obrazki do slidera.

To wszystko jeśli chodzi o HTML, teraz CSS:

@keyframes odpowiada za animacje w CSS. Ta animacja jest dosyć prosta, obrazki przesuwają się w lewo. Animację deklarujesz w procentach od 0 do 100. Przesuwanie w lewo musi być oczywiście z wartością ujemną (inaczej widziałbyś tło strony). slider figure img ma szerokość 20% (jak dasz 10% będziesz miał animację z 2 zdjęciami jeśli napiszesz odpowiednio @keyframes). No i float: left; czyli wyrównanie diva do lewej strony (bardzo przydatne i oszczędza kłopotów). slider figure tłumaczyć nie będę bo to jest bardzo proste (podstawy CSS). Jedynie animation: 30s slidy infinite; mówi że pętla od 0 do 100 procent ma się skończyć po upływie 30 sekund i się tak jak wcześniej napisałem będzie zapętlać co deklaruje wartość infinite.

TO WSZYSTKO! Pozdrawiam

odpowiedź 18 sierpnia 2015 przez Mieszko I Stary wyjadacz (10,980 p.)

1. Slider ten działa za pomocą animacji.

2. Zmieniany jest atrybut "left". Ponieważ zdjęcia są odpowiedniej szerokości (cała szerokość ekranu), można je łatwo zmieniać (pierwsze zdjęcie: left: 0%, drugie zdjęcie: -100% itd...).

3. Poczytaj sobie: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure

4. Zdjęcie musi mieć takie same wymiary jak poprzednie. Dodaje się je w ten sam sposób co poprzednie. W animacji należy zmienić czas trwania zdjęć, np.:

@keyframes slidy {
0% { left: 0%; }
10% { left: 0%; }
20% { left: -100%; }
30% { left: -100%; }
40% { left: -200%; }
50% { left: -200%; }
60% { left: -300%; }
70% { left: -300%; }
80% { left: -400%; }
90% { left: -500%; }
100% { left: -500%; }
}

Oczywiście im więcej zdjęć tym zmian w animacji będzie więcej.

Pozdrawiam.

odpowiedź 18 sierpnia 2015 przez piotrGTX Początkujący (280 p.)
edycja 18 sierpnia 2015 przez piotrGTX

Animacje w CCS3

http://www.w3schools.com/css/css3_animations.asp

Tag <figure>

http://www.w3schools.com/tags/tag_figure.asp

W pierwszym linku wszystko jest fajnie opisane :)

------------------------------

Aby dodać obrazki edytujesz kod HTML. Z tym, że dla zachowania dobrego efektu pierwszy i ostani obrazek powinny być takie same. Aby uniknać brzydkiego przeskoku.

Obrazki wypełniają 100% slidera. Więc pierwszy obrazek ma pozycje left: 0%. A każdy następny o -100% miejszą.

Skąd wiedzieć w jakim % ? Opowiedź jest prosta (100%/ilość_obrazków)*(n-1).