Slider, który przewija shortcode stworzone jako szablon Elementora

Ten kod tworzy prosty suwak (slider) z przyciskami „Poprzedni” i „Następny” do nawigacji między slajdami. Składa się z trzech głównych części: struktury HTML, stylów CSS i skryptu JavaScript.

Kroki, aby dodać ten kod w Elementorze:

W sekcji HTML Elementora, wklej fragmenty HTML i JavaScript (zgodnie z powyższymi instrukcjami).
W sekcji Custom CSS Elementora, wklej fragment CSS.
Utwórz szablony Elementora z odpowiednimi identyfikatorami (ID_1, ID_2, itd.) i dodaj treść slajdów.
Opcjonalnie, możesz dodać więcej slajdów, dodając dodatkowe linie z szablonami Elementora w strukturze HTML suwaka.

<div class="elementor-slider-wrapper">
  <div class="elementor-slider">
    <div class="elementor-slide">// tutaj dodaj shortcode ( id_1 ) //</div>
    <div class="elementor-slide">// tutaj dodaj shortcode ( id_2 ) //</div>
    <!-- Dodaj więcej slajdów według potrzeb -->
  </div>
  <button class="slider-prev">Poprzedni</button>
  <button class="slider-next">Następny</button>
</div>

<style>
.elementor-slider-wrapper {
  position: relative;
  overflow: hidden;
}

.elementor-slider {
  display: flex;
  width: 100%;
  transform: translateX(0);
  transition: transform 0.5s ease-in-out;
}

.elementor-slide {
  flex: 0 0 100%;
}
</style>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    var slider = document.querySelector(".elementor-slider");
    var slides = slider.children;
    var prevButton = document.querySelector(".slider-prev");
    var nextButton = document.querySelector(".slider-next");
    var currentSlide = 0;

    function goToSlide(n) {
      currentSlide = (n + slides.length) % slides.length;
      slider.style.transform = 'translateX(-' + (currentSlide * 100) + '%)';
    }

    prevButton.addEventListener("click", function () {
      goToSlide(currentSlide - 1);
    });

    nextButton.addEventListener("click", function () {
      goToSlide(currentSlide + 1);
    });
  });
</script>

Struktura HTML:

Wstaw ten fragment kodu w sekcji HTML Elementora, gdzie chcesz umieścić suwak. Zawiera kontener z klasą „elementor-slider-wrapper„, suwak z klasą „elementor-slider” oraz przyciski nawigacyjne.

Style CSS:

Stylizacja suwaka i przycisków. Wstaw ten fragment kodu w sekcji Custom CSS Elementora. Definiuje podstawowe style dla suwaka, takie jak ukrycie nadmiaru zawartości, wyświetlanie slajdów obok siebie oraz responsywność slajdów.

Skrypt JavaScript:

Ten skrypt jest odpowiedzialny za interaktywną funkcjonalność suwaka. Wstaw go w sekcji HTML Elementora, najlepiej tuż po fragmencie HTML. Skrypt wykonuje następujące zadania:
a) Wybiera elementy suwaka, slajdy i przyciski.
b) Definiuje funkcję goToSlide(), która przesuwa suwak do odpowiedniego slajdu.
c) Dodaje nasłuchiwacze zdarzeń do przycisków „Poprzedni” i „Następny”, które wywołują funkcję goToSlide() z odpowiednim indeksem slajdu.