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

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

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.

5. Dodaj nowy kod js w sekcji Body bottom i zapisz zmiany:

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

Gotowe! 

Jeśli masz problem z implementacją slidera, napisz do nas na chacie lub na support@landingi.com

Did this answer your question?