Dzisiaj jest sobota, 21 października 2017
Blogerze, nie bądź frajerem!Pobierz Alib CyMeS 7.0 za frikoIle za zlecenie czyli jak wycenić własną pracę?
aSlider - w zasadzie klasyczny

aSlider - w zasadzie klasyczny

poniedziałek, 2015-03-302727moje projekty, internet, Alib CyMeS

Sliderów w internecie dostatek. Niektóre proste, inne totalnie wypasione a ich kod jest większy od biblioteki jQuery.

Z użyciem tych drugich spotkałem się zaledwie kilka razy i osobiście uważam, że jest to przerost formy nad treścią. Raczej pokazanie, że „się da”, niż praktycznie potrzebny ficzer na stronie internetowej. Prostota jest w cenie i takie slidery są popularniejsze. Także ich używanie jest prostsze. Jak wiecie, lubię wyważać otwarte drzwi, więc zmajstrowałem swój mały slider, który sprawnie robi to, do czego jest stworzony. Docelowa wersja dodatkowo dopasowuje slajdy do szerokości ekranu (dobre w serwisach RWD - od nowego roku obowiązkowe) i ma kilka innych drobiazgów, które na potrzeby tego wpisu usunąłem - ma być prosto i czytelnie, a resztę sami sobie dorobicie.

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. Opcjonalnie, bo można tych elementów nie dodawać jeśli nie trzeba. Przejścia między slajdami są podstawowe: przesuwanie w każdą stronę i zmiana przezroczystości (fade). Dzięki temu, że nie plugin pracuje na kontenerze a nie bezpośrednio grafice, można zamiast zdjęć wstawić animację, tekst czy osadzić film z YT.

Jak zainstalować i uruchomić?

W przykładowym pliku utworzone są podstawowe style, których nie będę opisywać. Potem w sekcji BODY tworzymy kontener #Slider (można go nazwać inaczej), slajdy wrzucamy w listę UL. Jeśli potrzebujemy strzałek dodajemy (już poza listą) odpowiednie kontenery z klasą LeftRight. Mogą zawierać treść, można też w stylach ustawić grafikę strzałek jako tło. Aby była numeracja, dodajemy kontener z klasą Bullet. Usunięcie numerów z kwadracików to już robota dla CSS, ale przecież każdy wie, jak to obsłużyć :)

Slider uruchamiamy poleceniem JavaScriptu (pamiętając o wcześniejszym dołączeniu 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" - slajd płynnie się pojawia wjeżdżając z prawej strony)

Co pod maską?

Myślę, że plugin jest na tyle krótki i prosty, że jeśli ktoś chce go obadać, to sam wszystko rozkmini. Pozostali i tak będą korzystać z gotowców nie zastanawiając się, jak działają. Zmiennych jest kilka i chyba wystarczająco jasne (w razie czego pytajcie w komentarzach).

Metody (a raczej funkcje, bo w JS nie ma klas):

  • Animate - serce pluginu - tutaj na podstawie parametrów przygotowywany jest sposób animowania slajdów i jego realizacja
  • Goto - bezpośredni skok do dowolnego slajdu
  • Next - przejście do poprzedniego/następnego slajdu

Poza tym wstępne ustawienia obiektów.

Jak wygląda w praktyce?

Wdrażam go praktycznie w każdym serwisie, więc zobaczysz go np. tutaj:

ad3.eu
alib.ad3.eu
word.lublin.pl
rezydencja.warszawa.pl

Pobierajcie i używajcie tego wszyscy, oto dzieło moje :)

Jeśli podoba Ci się wpis,
koniecznie zalajkuj,
skomentuj i zapisz się na