script.js

const slides = document.querySelectorAll('.slide');

slides.forEach((slide, indx) => {
    slide.style.transform = `translateX(${indx * 100}%)`;
});

// current slide counter
let curSlide = 0;

document.addEventListener("DOMContentLoaded", function() {
  // Wait for the DOM to be fully loaded.

  const slider = document.querySelector('.slider'); // Get the slider container.
  const slides = document.querySelectorAll('.slide img'); // Get all images within slides.

  let maxHeight = 0; // Variable to store the max height.

  slides.forEach(function(img) {
    img.onload = function() {
      // Ensure the image is loaded before calculating its height.
      if (img.height > maxHeight) {
        maxHeight = img.height; // Update maxHeight with the tallest image so far.
      }
      slider.style.height = maxHeight + 'px'; // Set the slider's height to the tallest image's height.
    };
  });
});


const nextSlide = document.querySelector(".btn-next");

let maxSlide = slides.length - 1;

nextSlide.addEventListener("click", function () {
    if (curSlide === maxSlide) {
        curSlide = 0;
    } else {
        curSlide++;
    }


    slides.forEach((slide, indx) => {
        slide.style.transform = `translateX(${100 * (indx - curSlide)}%)`;
    });
});

// select prev slide button
const prevSlide = document.querySelector(".btn-prev");

// add event listener and navigation functionality
prevSlide.addEventListener("click", function () {
  // check if current slide is the first and reset current slide to last
  if (curSlide === 0) {
    curSlide = maxSlide;
  } else {
    curSlide--;
  }

  //   move slide by 100%
  slides.forEach((slide, indx) => {
    slide.style.transform = `translateX(${100 * (indx - curSlide)}%)`;
  });
});