Slajdery

Zaktualizowano: 14 sierpnia, 2020 Autor: Avatar Teresa
share
Spis treści
share
Spis treści

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 = 16000;
	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);
	})

	setTimeoutnterval(function(){
		if (!buttonClicked) { current.fadeOut()
			if (current.next().length) {
				current = current.next()      
			}
			else {
				current = $currentSlider.find('img').first();
			}
			current.fadeIn(300);
		} 
	}, time) 
});
</script>

To wszystko!

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

share

Czy ta instrukcja była pomocna?