Opis i użycie
Uruchomienie tego slajdera na landing page wymaga dodania krótkiego skryptu w zakładce "Kody javascript" oraz odpowiedniej liczby tagów <div></div>, za pomocą elementu "Własny HTML", podczas edycji landinga.

Poniższy kod należy wkleić do zakładki "Kody javascript":


<script src="https://s3.eu-central-1.amazonaws.com/scripts.assets-landingi.com/customer-success/Lean_slider/lean-slider.js"></script>
<link rel="stylesheet" href="https://s3.eu-central-1.amazonaws.com/scripts.assets-landingi.com/customer-success/Lean_slider/lean-slider.css" type="text/css"/>
<link rel="stylesheet" href="https://s3.eu-central-1.amazonaws.com/scripts.assets-landingi.com/customer-success/Lean_slider/sample-styles.css" type="text/css"/>
    <script type="text/javascript">
    $(document).ready(function() {
        var slider = $('#slider').leanSlider({
            directionNav: '#slider-direction-nav',
            controlNav: '#slider-control-nav'
        });
    });
    </script>

Następnie w edytorze wybierz sekcję, w której ma znajdować się slider i dodaj w niej element HTML. W elemencie tym wpisz kod, zgodnie z poniższym wzorem. 

UWAGA - wartość podana jako parametr src="", to tylko przykład. W tym miejscu podaj linki do swoich plików graficznych, które chcesz umieścić w slajderze.

Pamiętaj, żeby nadać kolejne numery na końcu parametru class każdego ze slajdów. Nie zmieniaj żadnego z pozostałych parametrów class.

<div class="slider-wrapper">
    <div id="slider">
<div class="slide1">
<img src="http://location/img/picture1.jpg" alt="" />
</div>
<div class="slide2">
                 <img src="http://location/img/picture2.jpg" alt="" />
</div>
<div class="slide3">
        <img src="http://location/img/picture3.jpg" alt="" />
</div>
<div class="slide4">
<img src="http://location/img/picture4.jpg" alt="" />
</div>
    </div>
    <div id="slider-direction-nav"></div>
    <div id="slider-control-nav"></div>
    </div>

Warto natomiast uzupełnić parametr "alt", który zawiera tekst, jaki będzie wyświetlany jeżeli z jakiegoś powodu w przeglądarce użytkownika nie zostanie zaczytany obrazek ze slajdera. Dobrze jest umieścić tu słowo lub słowa, które jasno opiszą co zawiera obrazek. Prawidłowe użycie parametrów alt może także pozytywnie wpływać na pozycjonowanie strony przez wyszukiwarkę Google.

Jeśli chcesz wykorzystać obrazki, które zostały wcześniej wgrane na Twoje konto w Landingach poprzez edytor, możesz łatwo uzyskać linki do nich. W tym celu otwórz galerię przesłanych obrazków, a następnie kliknij prawym przyciskiem myszy na wybranym obrazku i wybierz opcję "Zbadaj element" (Czynność ta wygląda identycznie zarówno w przeglądarkach Chrome jak i w Firefox). W narzędziach developerskich, które się wtedy otworzą, można odczytać i skopiować link do lokalizacji pliku:

Liczba elementów div zależy od tego, ile elementów ma mieć Twój slajder, ponieważ każdy div powinien zawierać link do jednego pliku graficznego.

Elementy o id "slider-direction-nav" oraz "slider-control-nav" są potrzebne do prawidłowego wyświetlania i działania strzałek oraz kropek, służących do przełączania kolejnych slajdów. Bez tych elementów slajder w dalszym ciągu będzie działał, natomiast nie będzie możliwe ręczne przełączanie pomiędzy slajdami.

Parametry dodatkowe
Standardowo slajder automatycznie przełącza obrazki w niewielkich odstępach czasu i nie wymaga żadnych dodatkowych ustawień, do prawidłowego działania. Istnieje jednak możliwość zastosowania dodatkowych parametrów, które wpłyną na działanie slajdera.

Parametry te należy dodawać w skrypcie javascript, w obrębie funkcji odpowiedzialnej za uruchomienie slajdera:

    
$(document).ready(function() {
        var slider = $('#slider').leanSlider({
            directionNav: '#slider-direction-nav',
            controlNav: '#slider-control-nav',
            tutaj należy dodawać parametry
        });

Każdy kolejny parametr należy dodawać po przecinku. Nie ma konieczności zapisywania ich w pionie, jeden pod drugim, jednak tak zapisany kod jest łatwy do analizy, co może mieć znaczenie np. w przypadku korzystania ze wsparcia technicznego Landingi.

  • pauseTime: 1000 - ustawia czas, po jakim nastąpi przełączenie kolejnego slajdu. Czas podany jest w milisekundach, czyli 1000 odpowiada 1 sekundzie;
  • pauseOnHover: true - po najechaniu kursorem nad slajder, następuje zatrzymanie jego działania, co umożliwia dokładne zapoznanie się z każdym z jego elementów. Odsunięcie kursora poza obszar slajdera powoduje wznowienie przełączania jego elementów;
  • startSlide: 0 - ustawia, który sjald będzie wyświetlany jako pierwszy. Domyślnie jest to pierwszy div zawierający slajd, jednak można zmienić tą kolejność także tutaj. Pamiętaj, że 0 oznacza pierwszy slajd, tak więc 1 to slajd drugi itp.

Opisy obrazków
Każdy z plików graficznych można dodatkowo opisać, tak aby np. w dolnej części slajdu wyświetlał się jakiś tekst. Tekst można umieścić w tagu <p> (od 1 -6) albo po prostu w <div>. Można wykorzystywać tagi formatujące HTML. Zachęcamy do eksperymentowania :)

Elementy inne, niż pliki graficzne
Oprócz obrazków, w elementach div slajdera można umieszczać także inne elementy (tagi) html, jednak może to powodować niepożądane zmiany w zachowaniu i wyglądzie slajdera. Wstawianie innych elementów bez posiadania przynajmniej podstawowej znajomości HTML raczej nie jest wskazane. Zdecydowanie rekomendujemy, aby w slajderze umieszczać wyłącznie pliki graficzne.

Twórcy
Slajder został przygotowany i udostępniony przez gilbitron, jako Lean Slider. Oryginalną dokumentację oraz link do pełnego kodu znaleźć można tutaj.

Did this answer your question?