Ustawienia Slidera Opis wszystkich ustawień modułu
Poniżej umieściłem przykładową instancję ze wszystkimi możliwymi ustawieniami. Można uzależnić je od szerokości ekranu, dzięki czemu moduł będzie inaczej działał na urządzeniach mobilnych. Każda instancja slidera ma indywidualny zestaw ustawień, dzięki czemu możemy na jednej stronie posiadać wiele modułów niezależnych od siebie i z różnymi opcjami.
<!-- Treść strony -->
<script src="compsoul.js"></script>
<script src="slider.js"></script>
<script>
new Slider(".compsoul-slider .compsoul-slide").options({
classActive: "compsoul-active",
classFirst: "compsoul-first",
classNext: "compsoul-next",
classPrev: "compsoul-prev",
classPrevious: "compsoul-previous",
classLoaded: "compsoul-loaded",
classLoading: "compsoul-loading",
classError: "compsoul-error",
classUnset: "compsoul-unset",
classAnimation: "compsoul-animation",
classWait: "compsoul-wait",
classDirectionUp: "compsoul-direction-up",
classDirectionDown: "compsoul-direction-down",
selector: selector,
next: ".compsoul-slide-next",
prev: ".compsoul-slide-prev",
nav: ".compsoul-slide-nav",
timeline: ".compsoul-slide-timeline",
parent: false,
height: false,
cover: true,
sliderCover: "figure",
sliderImg: "figure img",
animation: true,
animationend: false,
load: true,
preload: true,
first: 0,
loop: true,
responsive: {
400: {
loop: false
},
800: {
loop: true
},
1300: {
loop: false
}
}
}).init();
</script>
</body>
</html>Tabela z opisem
Poniższa tabela zawiera dokładny opis ustawień slidera wraz z ich przeznaczeniem oraz domyślnymi wartościami. Pierwsza kolumna przedstawia nazwę ustawienia, do którego przypisujemy opcję zgodną z wytycznymi w kolumnie trzeciej. Domyślne wartości dla poszczególnych ustawień zostały przedstawione w kolumnie drugiej. Ostatnia zaś kolumna przedstawia opis danego ustawienia. Istnieje możliwość swobodnej rozbudowy ustawień slidera jak i zmiany ustawień domyślnych, poprzez edycję pliku slider.js. Niektóre z ustawień mają swoje osobne podstrony i są tam szerzej opisane.
| Nazwa właściwości | Domyślna wartość | Dostępne warianty | Opis |
|---|---|---|---|
| parent | false | selektory CSS, false |
Element wskazywany przez selektor, będący rodzicem slidera. Domyślna wartość false, jako rodzica, wskazuje element będący rodzicem pierwszego slajdu. |
| height | false | boolean (true, false) |
Opcja slidera w momencie aktywacji, nadaje wysokość aktywnego slajdu na element wskazany we właściwości parent. Domyślna wartość wyłącza tę opcję. |
| cover | true | boolean (true, false) |
Funkcjonalność odpowiedzialna za pobranie zdjęcia z właściwości sliderImg i nadanie jej elementowi wskazywanemu przez sliderCover. Wartość false wyłącza funkcjonalność. |
| sliderCover | "figure" | selektory CSS, false |
Właściwość przyjmuje selektor CSS, wskazujący element znajdujący się wewnątrz slajdu, który otrzyma tło wskazane we właściwości sliderImg. |
| sliderImg | "figure img" | selektory CSS, false |
Właściwość przyjmuje selektor CSS, wskazujący element znajdujący się wewnątrz slajdu, który zostanie pobrany jako tło przypisane do elementu wskazanego we właściwości sliderCover. Wyłączenie opcji powinno poprzedzać wyłączenie właściwości load oraz preload, gdyż slider nie otrzymuje informacji, które zdjęcie ma zostać wczytane. |
| animation | true | boolean (true, false) |
Właściwość informująca o występowaniu animacji CSS3. Opcja powinna zostać wyłączona w momencie kiedy slider nie posiada animacji. |
| animationend | false | selektory CSS, false |
Właściwość wykorzystywana do tworzenia złożonych animacji. Po zakończeniu animacji wskazanego elementu następuje zmiana slajdu. |
| load | true | boolean (true, false) |
Rozbudowana funkcjonalność odpowiedzialna za wczytywanie zdjęć. Dokładny opis działania znajduje się w zakładce: load. |
| preload | true | boolean (true, false) |
Rozbudowana funkcjonalność odpowiedzialna za lazy loading. Dokładny opis działania znajduje się w zakładce: preload. |
| first | 0 | number (liczby), "random" |
Właściwość wskazuje na pierwszy slajd, który zostanie uruchomiony po wczytaniu strony. Opcja przyjmuje wartość random, dzięki której pierwszy slajd przy każdym przeładowaniu będzie losowy. Należy pamiętać, że zakres liczbowy rozpoczyna się od 0 - pierwsze zdjęcie, a kończy na ilości zdjęć pomniejszonej o jeden. |
| responsive | {} | object (obiekt) | Obiekt przechowujący szereg ustawień, odpowiedzialnych za zmianę zachowania slidera na poszczególnych rozdzielczościach. Więcej informacji w zakładce: RWD. |
Struktura HTML modułu
| Nazwa właściwości | Domyślna wartość | Dostępne warianty | Opis |
|---|---|---|---|
| timeline | ".compsoul-slide-timeline" | selektory CSS, false |
Właściwość wskazuje element, którego animacja odpowiada za automatyczną zmianę slajdów. Wartość false lub brak elementu na stronie wyłącza funkcjonalność. |
| next | ".compsoul-slide-next" | selektory CSS, false |
Właściwość wskazująca element, który po kliknięciu uruchomi następny slajd. Wartość false lub brak elementów wyłącza opcje. |
| prev | ".compsoul-slide-prev" | selektory CSS, false |
Właściwość wskazująca element, który po kliknięciu uruchomi poprzedni slajd. Wartość false lub brak elementów wyłącza opcje. |
| nav | ".compsoul-slide-nav" | selektory CSS, false |
Opcja odpowiedzialna za wyświetlanie nawigacji punktowej. Właściwość wskazuje elementy wchodzące w skład nawigacji. Należy pamiętać, aby liczba elementów pokrywała się z liczbą slajdów. Wartość false lub brak elementów wyłącza opcje. |
Nomenklatura modułu
| Nazwa właściwości | Domyślna wartość | Dostępne warianty | Opis |
|---|---|---|---|
| classActive | "compsoul-active" | string (tekst) | Klasa CSS odpowiedzialna za aktywowanie elementów takich jak: aktywny slajd, nawigacja, pasek postępu, ect. |
| classFirst | "compsoul-first" | string (tekst) | Klasa CSS nadawana na pierwszy slajd i usuwana po zmianie slajdu. |
| classNext | "compsoul-next" | string (tekst) | Klasa CSS nadawana na kolejny slajd. |
| classPrev | "compsoul-prev" | string (tekst) | Klasa CSS nadawana na poprzedni slajd. |
| classPrevious | "compsoul-previous" | string (tekst) | Klasa CSS nadawan na slajd poprzednio aktywny. |
| classLoaded | "compsoul-loaded" | string (tekst) | Klasa CSS nadawana na slajdy oraz elementy nawigacji, które zostały wczytane. |
| classLoading | "compsoul-loading" | string (tekst) | Klasa CSS nadawana na slajdy oraz elementy nawigacji, które są wczytywane. |
| classError | "compsoul-error" | string (tekst) | Klasa CSS nadawana na slajdy oraz elementy nawigacji, które nie zostały wczytane. |
| classUnset | "compsoul-unset" | string (tekst) | Klasa CSS używana do restartu animacji. |
| classAnimation | "compsoul-animation" | string (tekst) | Klasa CSS używana do restartu animacji. |
| classWait | "compsoul-wait" | string (tekst) | Klasa CSS blokująca slider podczas uruchamiania animacji. Nadawana podczas rozpoczęcia animacji i usuwana po jej zakończeniu. |
| classDirectionUp | "compsoul-direction-up" | string (tekst) | Klasa CSS wskazująca kierunek slidera. |
| classDirectionDown | "compsoul-direction-down" | string (tekst) | Klasa CSS wskazująca kierunek slidera. |
Dziękuję za przeczytanie
Jeżeli spodobał Ci się mój wpis, zachęcam do obserwowania mojego profilu w serwisie facebook. Dodatkowo będzie mi bardzo miło jeżeli zechcesz podzielić się swoimi uwagami w komentarzach i zostawisz łapkę w górę. Jeżeli pilnie potrzebujesz pomocy lub chcesz o coś zapytać, skorzystaj z formularza kontaktowego lub napisz na daniel@compsoul.pl. Jeżeli Twoja sprawa jest naprawdę pilna, możesz zadzwonić na numer: +48 732 846 416