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.
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.
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.
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();
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).
Wdrażam go praktycznie w każdym serwisie, więc zobaczysz go np. tutaj: