Slajdery

04.02.2019

Jeśli na swoim landing page chcesz mieć więcej niż jeden slajder, skorzystaj z poniższej instrukcji, żeby zaimplementować typ slajdera, który umożliwi Ci bezproblemowe dodanie większej ich ilości na jednym landingu. Oczywiście, ten sposób umożliwi ci dodanie również tylko jednego slajdera.

Jak działa ten slajder?

Ten slajder wymaga dodania kodu js do landinga oraz klas do odpowiednich elementów w edytorze.

Jak dodać slajder bądź kilka slajderów do swojego landinga?

1. Stwórz w edytorze osobną sekcję (np. sekcja_slider1) i nadaj jej klasę “my slider”. Następnie dodaj do niej z galerii lub dysku zdjęcia, które chcesz mieć w sliderze.

Pamiętaj, że zdjęcia w sliderze:

  • powinny być tej samej wielkości;
  • ich rozmiar powinien odzwierciedlać rozmiar slidera;
  • będą się przewijać w sliderze w kolejności dodania do edytora.

2. Poniżej sekcji (sekcja_slider1) utwórz kolejną sekcję, np. sekcja_slider2. Dodaj do niej ikony dwóch rodzajów strzałek – jedne służące do przewijania w lewo, a drugie w prawo. Nadaj im odpowiednio klasy „next” i „previous”.

3. Zapisz i opublikuj zmiany, a następnie wyjdź z edytora.

4. Przejdź do głównego widoku w aplikacji Landingi, a następnie wejdź w Dashboard-> kody Javascript wybranego landinga i dodaj nowy skrypt w body bottom na stronie głównej.

<script>
  $('.my-slider').each(function(){
    var $currentSlider = $(this);
    $(this).find('img').not(':first').hide();
    var current = $currentSlider.find('img').first();
    var $sectionUnderSlider = $currentSlider.next();
    var time = 6000;
    var buttonClicked = 0;
    
    $sectionUnderSlider.find('.next').click(function(){
      buttonClicked = 1;
      setTimeout(function(){
        buttonClicked = 0;
      }, time)
      current.fadeOut()
      if (current.next().length) {
        current = current.next()
      } else {
        current = $currentSlider.find('img').first();
      }
      current.fadeIn(300);
    });
    
    $sectionUnderSlider.find('.previous').click(function(){
      buttonClicked = 1;
      setTimeout(function(){
        buttonClicked = 0;
      }, time)
      current.fadeOut()
      if (current.prev().length) {
        current = current.prev()
      } else {
        current = $currentSlider.find('img').last();
      }
      current.fadeIn(300);
    })
    
    setInterval(function(){
      if (!buttonClicked) {
current.fadeOut()
      if (current.next().length) {
        current = current.next()
      } else {
        current = $currentSlider.find('img').first();
      }
      current.fadeIn(300);
      }
}, time) //auto change timer
  });
  
</script>

To wszystko!

Jeśli nie podoba ci się ta metoda, zobacz jeszcze alternatywny typ slidera (umożliwia dodanie jednego slidera do landinga)

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.