Zyrex

Stworzenie karuzeli zdjęć za pomocą JavaScript i CSS

Jest to krótki tutorial, jak stworzyć slider zdjęć z animacjami. Efekt możecie zobaczyć klikając w karuzela zdjęć.

Na początku przygotuj zdjęcia, które chcesz wyświetlić w karuzeli. Możesz umieścić je w osobnym folderze na swoim serwerze.

Kolejnym krokiem jest stworzenie pliku HTML zawierającego elementy potrzebne do wyświetlenia karuzeli zdjęć.

<div id="carousel">
  <div class="slide">
    <img src="image1.jpg" alt="Slide 1">
  </div>
  <div class="slide">
    <img src="image2.jpg" alt="Slide 2">
  </div>
  <div class="slide">
    <img src="image3.jpg" alt="Slide 3">
  </div>
</div>

Następnie w pliku CSS zdefiniujemy styl dla elementów karuzeli.

#carousel {
  width: 800px;
  height: 600px;
  overflow: hidden;
  position: relative;
}

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Oto kod JavaScript, który służy do zdefiniowania logiki karuzeli zdjęć

const carousel = document.getElementById('carousel'); // pobierz element kontenera karuzele
const slides = carousel.querySelectorAll('.slide'); // pobierz wszystkie slajdy
let currentSlide = 0; // zmienna przechowująca indeks bieżącego slajdu

// Funkcja wyświetlająca slajd o podanym indeksie
function showSlide(n) {
  slides[currentSlide].classList.remove('active'); // usuń klasę "active" z bieżącego slajdu
  slides[n].classList.add('active'); // dodaj klasę "active" do slajdu o podanym indeksie
  currentSlide = n; // ustaw bieżący slajd na ten o podanym indeksie
}

// Funkcja przewijająca slajdy w prawo (do następnego)
function nextSlide() {
  showSlide((currentSlide + 1) % slides.length); // wyświetl następny slajd (lub pierwszy, jeśli to ostatni)
}

// Funkcja przewijająca slajdy w lewo (do poprzedniego)
function prevSlide() {
  showSlide((currentSlide - 1 + slides.length) % slides.length); // wyświetl poprzedni slajd (lub ostatni, jeśli to pierwszy)
}

// Automatyczne przewijanie slajdów co 5 sekund
setInterval(nextSlide, 5000);

Pamiętaj, że aby kod JavaScript działał poprawnie, musisz go umieścić na końcu pliku HTML lub skorzystać z funkcji „window.onload” lub „addEventListener(’DOMContentLoaded’)” do zapewnienia, że wszystkie elementy strony zostały już załadowane.

Aby dodać tekst do karuzele zdjęć należy w pliku HTML dla każdego slajdu dodaj element

<div class="slide-text">Tekst slajdu</div>

Całość będzie wyglądała następująco:

<div id="carousel">
  <div class="slide">
    <img src="image1.jpg" alt="Slide 1">
    <div class="slide-text">Tekst slajdu 1</div>
  </div>
  <div class="slide">
    <img src="image2.jpg" alt="Slide 2">
    <div class="slide-text">Tekst slajdu 2</div>
  </div>
  <div class="slide">
    <img src="image3.jpg" alt="Slide 3">
    <div class="slide-text">Tekst slajdu 3</div>
  </div>
</div>

W pliku CSS zdefiniuj styl dla elementu z tekstem slajdu, tak aby był on widoczny nad obrazkiem. Możesz na przykład ustawić mu pozycję „absolute” i kolor tła:

.slide-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

W pliku JavaScript musimy zdefiniować funkcję, która będzie ustawiać tekst slajdu odpowiednio do bieżącego slajdu.

// Funkcja ustawiająca tekst slajdu odpowiednio do bieżącego slajdu
function showSlideText() {
  slideTexts.forEach((slideText, index) => {
    // Jeśli indeks slajdu odpowiada indeksowi bieżącego slajdu, dodaj klasę "active"
    if (index === currentSlide) {
      slideText.classList.add('active');
    } else {
      slideText.classList.remove('active');
    }
  });
}

Animacje uzyskamy za pomocą CSS.

Animacje CSS to sposób na tworzenie efektów przejścia pomiędzy różnymi stanami elementów HTML. Możesz używać animacji CSS do zmiany wielu właściwości elementów, takich jak kolor, rozmiar, pozycja itp. Aby utworzyć animację CSS, musisz zdefiniować co najmniej dwa stany elementu: początkowy i końcowy. Następnie możesz użyć klucza @keyframes do zdefiniowania sekwencji przejść pomiędzy tymi stanami. Możesz również określić parametry animacji, takie jak czas trwania, przyspieszenie itp.

Przykłąd:

@keyframes fadeOut {
  from {opacity: 1;}
  to {opacity: 0;}
}

.element {
  animation-name: fadeOut;
  animation-duration: 5s;
}

Całość można pobrać z https://github.com/ZyrexPl/Slider-Zyrex