aSlider - klasyczny slider na stronę internetową

poniedziałek, 2019-09-231357Alib CyMeS, Tutoriale, Software, Programowanie

Sliderów jest w internecie ogromna ilość. Niektóre są bardzo proste, inne totalnie wypasione, a ich kod jest większy od biblioteki jQuery. Nie chciałem być gorszy i napisałem swój na własne potrzeby. Teraz udostępniam dla Was.

Lubię minimalizm

Kilka razy pobawiłem się tymi wypasionymi i naprawdę ich możliwości powalają. Tylko czy są naprawdę potrzebne? Internet co prawda jest coraz szybszy, ale mimo wszystko nie widzę sensu przesyłania każdemu użytkownikowi setek kilobajtów tylko po to, żeby zmienić kilka obrazków. Jak dla mnie jest to przerost formy nad treścią. Raczej pokazanie, że „się da”, niż faktycznie potrzebny ficzer na stronie internetowej.

Prostota jest w cenie i takie minimalistyczne slidery są jednak popularniejsze. Także ich używanie jest prostsze. Mogłem użyć jakiegoś gotowego, ale jako że lubię wyważać otwarte drzwi, więc napisałem swój mały slider, który sprawnie robi to, do czego jest stworzony.

Co robi plugin?

Oczywiście animuje slajdy w określony sposób, z określoną szybkością. Dodatkowo obsługuje strzałki przewijania (poprzedni/następny) i numerację slajdów. Jest to opcjonalne, bo można tych elementów nie dodawać jeśli nie trzeba. Przejścia między slajdami są raczej podstawowe: przesuwanie w każdą stronę i zmiana przezroczystości (fade). Dzięki temu, że plugin pracuje na kontenerze, a nie bezpośrednio grafice, można zamiast zdjęć wstawić animację, tekst czy nawet osadzić film z YouTube.

Jak zainstalować i uruchomić?

W przykładowym pliku demonstracyjnym utworzone są podstawowe style, których chyba nie ma sensu opisywać. W sekcji BODY tworzymy kontener #Slider (można go nazwać inaczej), a slajdy wrzucamy w listę UL. Jeśli potrzebujemy strzałek dodajemy (już poza listą) odpowiednie kontenery z klasą Left i Right. Mogą zawierać treść, można też w stylach ustawić grafikę strzałek jako tło. Pełna dowolność. Aby była numeracja, dodajemy kontener z klasą Bullet. Usunięcie numerów z kwadracików to już robota dla CSS, ale to już każdy wie, jak zrobić :)
Slider uruchamiamy poleceniem JavaScriptu (pamiętając o wcześniejszym dołączeniu biblioteki jQuery):

$("#Slider").aSlider();

Opcjonalne parametry:

speed - czas trwania efektu przejścia w ms (standardowo 1000)
delay - czas wyświetlania jednego slajdu w ms (standardowo 3000)
lastanim - efekt animacji „odchodzącego w niebyt” slajdu (standardowo brak, animowany będzie tylko nadchodzący slajd)
nextanim - efekt animacji nadchodzącego slajdu (standardowo „fade right”, czyli slajd płynnie się pojawia wjeżdżając z prawej strony)

Co pod maską pluginu?

Jest on na tyle krótki i prosty, że nie powinniście mieć problemu z jego samodzielnym rozkminieniem. Pozostali i tak będą korzystać z gotowców nie zastanawiając się, jak działają. Zmiennych jest tylko kilka i chyba wystarczająco jasne (w razie czego pytajcie w komentarzach).