Slajder

29.01.2019

Ta metoda umożliwi ci dodanie jednego slidera do pojedynczego landinga za pomocą dodatkowego kodu JS oraz HTML’a. Alternatywny sposób możesz znaleźć tutaj.

RADA:
Jeżeli planujesz wiele slajderów na jednym landing page, sprawdź typ slajdera, który umożliwia dodanie większej ilości slajderów do jednego landinga.

Jak działa ten slider?

Uruchomienie tego slajdera wymaga dodania skryptu w zakładce Kody javascript oraz odpowiedniej liczby tagów za pomocą widgetu HTML podczas edycji landinga.

Jak dodać ten slider do swojego landing page?

1. Przejdź do głównego widoku w aplikacji Landingi, a następnie wejdź w Dashboard -> kody Javascript wybranego landinga. Poniższy kod należy wkleić jako nowy skrypt w sekcji Body bottom.

<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>

2. Następnie w edytorze wybierz sekcję, w której ma znajdować się slider i dodaj w niej element custom HTML. Wpisz tam kod zgodnie z poniższym wzorem.

<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>

UWAGA:
Wartość podana jako parametr 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.

RADA:
Warto 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 wczytany obrazek ze slajdera. Dobrze jest umieścić tu słowo lub słowa, które jasno opiszą to, co zawiera obrazek. Prawidłowe użycie parametrów alt może także pozytywnie wpływać na pozycjonowanie strony przez Google i SEO.

Jeżeli 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.

slider

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.

slider

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 tagu <div>. Można wykorzystywać tagi formatujące HTML.

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’a nie jest wskazane. 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.

Czy ten artykuł był dla Ciebie pomocny?

Nadal potrzebujesz pomocy?

Skontaktuj się z naszym supportem. Chętnie pomożemy.
Wyślij nam wiadomość
Ta strona używa plików cookies w celach analitycznych. Polityka prywatności.