<div class="carousel-container">
  <div class="carousel" id="carousel">
    <div class="carousel-slide">
      <div class="content">Slide 1</div>
    </div>
    <div class="carousel-slide">
      <div class="content">Slide 2</div>
    </div>
    <div class="carousel-slide">
      <div class="content">Slide 3</div>
    </div>
    <div class="carousel-slide">
      <div class="content">Slide 4</div>
    </div>
  </div>

  <div class="nav-arrows">
    <button class="nav-arrow" id="prevBtn">←</button>
    <button class="nav-arrow" id="nextBtn">→</button>
  </div>
</div>

.carousel-container {
  width: 100%;
  max-width: 800px;
  margin: 20px auto;
  position: relative;
}

.carousel {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.carousel::-webkit-scrollbar {
  display: none;
}

.carousel-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  position: relative;
  opacity: 0.7;
  scale: 0.98;
}

/* Color variations */
.carousel-slide:nth-child(1) {
  background-color: #472383;
}
.carousel-slide:nth-child(2) {
  background-color: #2ecc71;
}
.carousel-slide:nth-child(3) {
  background-color: #e74c3c;
}
.carousel-slide:nth-child(4) {
  background-color: #f39c12;
}

.nav-arrows {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.nav-arrow {
  background: rgba(255, 255, 255, 0.8);
  border: none;
  padding: 15px;
  cursor: pointer;
  pointer-events: auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 10px;
}

.content {
  text-align: center;
  color: white;
  padding: 20px;
  z-index: 10;
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  transition: all 1s ease;
}

.carousel-slide.snap-active {
  opacity: 1;
  scale: 1;
}

.carousel-slide.snap-active .content {
  opacity: 1;
  transform: translateY(0);
}

const carousel = document.getElementById("carousel");
const slides = carousel.querySelectorAll(".carousel-slide");
const prevBtn = document.getElementById("prevBtn");
const nextBtn = document.getElementById("nextBtn");

let currentSlide = 0;

function goToSlide(index) {
  currentSlide = index;
  const slideWidth = carousel.clientWidth;
  carousel.scrollTo({
    left: slideWidth * index,
    behavior: "smooth"
  });
}

// Arrow navigation
prevBtn.addEventListener("click", () => {
  if (currentSlide > 0) {
    goToSlide(currentSlide - 1);
  }
});

nextBtn.addEventListener("click", () => {
  if (currentSlide < slides.length - 1) {
    goToSlide(currentSlide + 1);
  }
});

carousel.addEventListener("scrollsnapchange", (event) => {
  const snapTarget = event.snapTargetInline;

  // Update current slide based on the final snap point
  const slideWidth = carousel.clientWidth;
  currentSlide = Math.round(carousel.scrollLeft / slideWidth);

  //Add animation for snapped

  const currentlySnapping = document.querySelector(".snap-active");
  if (currentlySnapping) {
    currentlySnapping.classList.remove("snap-active");
  }
  snapTarget.classList.add("snap-active");
});