Slider jest często używany przy tworzeniu stron internetowych by efektywnie przedstawić zdjęcia wyświetlające się po określonym czasie.
Zaczynając zabawę musimy stworzyć nowy projekt. Następnie tworzymy prostą klasę o nazwie “slider” gdzie w środku niej dodajemy zdjęcia (w moim przypadku będą to tylko 3 zdjęcia). Nasze multimedia powinny być zadeklarowane w jednej klasie.
Dodajemy także kod css do naszego pliku (Ja wykonam to w sekcji head). W środku css dodajemy trzy linie kodu którę będą odpowiadać klasie “zdjecia” zawartej w naszym znaczniku <img>.
Trzy linie kodu pozwalają nam:
- display: none; – zdjęcia nie będą wyświetlane dopóki nie będziemy tego chcieli
- width: 750px; – maksymalna szerokość zdjęć będzie miała 750 pikseli
- height: 322px; – maksymalna wysokość będzie miała 322 pikseli
Wygląd mamy już ustawiony. Czas nadszedł stworzyć animacje używając JavaScript. Aby przeglądarka zorientowała się że piszemy skrypt musimy umieścić go w <body> pomiędzy znacznikami <script></script>
Cały ten skrypt odpowiada z naszą animacje przejścia do kolejnych zdjęć:
- pierwsze dwie linię naszego skryptu odpowiadają za wywołanie skryptu i stworzenia zmiennej liczba
- W funkcji, zmienna var x pobiera element z naszej klasy “zdjecia”
- prosta pętla for odpowiada za niewyświetlanie zdjęć
- zapis liczba++ informuje o tym że do wartości liczba dodajemy 1 (liczba+1)
- instrukcja warunkowa if mówi że jeśli liczba będzie większa niż długość x to wartość liczby zamieniamy na jeden
- w ostatniej lini kodu mam do czynienia z opóźnieniem czasowym
