<section>
  <img src='https://picsum.photos/id/23/1000' alt='bg image' class='bg-image' />

  <div class="carousel-container">
    <div class="carousel">
      <img src="https://picsum.photos/id/23/500" alt="Image 1" class='carousel-image'>
      <img src="https://picsum.photos/id/2/500" alt="Image 2" class='carousel-image'>
      <img src="https://picsum.photos/id/12/500" alt="Image 3" class='carousel-image'>
      <img src="https://picsum.photos/id/321/500" alt="Image 4" class='carousel-image'>
    </div>
    <button class="arrow-button left-arrow"><span>&#8249;</span></button>
    <button class="arrow-button right-arrow"><span>&#8250;</span></button>
  </div>
</section>

body {
  height: 100vh;
  padding: 0;
  margin: 0;
  overflow: hidden;
  scroll-behavior: smooth;
}

.bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(8px);
  -webkit-filter: blur(8px);
  transform: scale(1.1);
}

section {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-container {
  position: relative;
  overflow: hidden;
}

.carousel {
  display: flex;
  max-width: 1000px;
  gap: 20px;
}

.carousel.sliding-transition {
  transition: transform 0.5s ease-in-out;
}

.carousel-image {
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
}

.arrow-button {
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #000;
  cursor: pointer;
  background: rgb(255, 255, 255, 0.3);
  width: 36px;
  font-size: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 50%;
  aspect-ratio: 1;
  -webkit-box-shadow: 5px 5px 5px -2px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 5px 5px 5px -2px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 5px 5px -2px rgba(0, 0, 0, 0.5);
}

span {
  height: 100%;
  width: 100%;
}

.left-arrow {
  left: 20px;
}

.right-arrow {
  right: 20px;
}

const carousel = document.querySelector(".carousel");
const backgroundImage = document.querySelector(".bg-image");

const leftArrow = document.querySelector(".left-arrow");
const rightArrow = document.querySelector(".right-arrow");

let currentIndex = 0;
let prevIndex;
const images = document.querySelectorAll(".carousel-image");

const totalImages = Object.keys(images).length;

// Use this in your project, if you're doing it locally
// const imageWidth = images[1].getBoundingClientRect().x;

const imageWidth = 520;
console.log("getbounding1", images[1].getBoundingClientRect());

leftArrow.addEventListener("click", () => {
  prevIndex = currentIndex;
  currentIndex = (currentIndex - 1 + totalImages) % totalImages;
  carousel.style.transform = `translateX(-${imageWidth}px)`;
  carousel.insertBefore(images[currentIndex], carousel.firstChild);

  setTimeout(() => {
    carousel.style.transform = "";
    carousel.classList.add("sliding-transition");
    backgroundImage.src = images[currentIndex].src.slice(0, -3) + "1000";
  }, 10);

  setTimeout(() => {
    carousel.classList.remove("sliding-transition");
  }, 490);
});

rightArrow.addEventListener("click", () => {
  carousel.classList.add("sliding-transition");

  prevIndex = currentIndex;
  currentIndex = (currentIndex + 1) % totalImages;

  carousel.style.transform = `translateX(-${imageWidth}px)`;
  backgroundImage.src = images[currentIndex].src.slice(0, -3) + "1000";

  setTimeout(() => {
    carousel.appendChild(images[prevIndex]);
    carousel.classList.remove("sliding-transition");
    carousel.style.transform = "";
  }, 500);
});