<main>
  <button class="carousel-arrow carousel-arrow--prev" onclick="handleCarouselMove(false)">
    &#8249;
  </button>

  <button class="carousel-arrow carousel-arrow--next" onclick="handleCarouselMove()">
    &#8250;
  </button>
  
  <div class="carousel-container" dir="ltr">
    <div class="carousel-slide">1</div>
    <div class="carousel-slide">2</div>
    <div class="carousel-slide">3</div>
    <div class="carousel-slide">4</div>
    <div class="carousel-slide">5</div>
    <div class="carousel-slide">6</div>
    <div class="carousel-slide">7</div>
    <div class="carousel-slide">8</div>
  </div>
</main>

<footer>
  <p>
    Pen by <a href="https://www.jemimaabu.com" target="_blank">Jemima Abu</a><span style="color: #D11E15"> &#9829;</span>
  </p>
</footer>

body {
  margin: 0;
  position: relative;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding-bottom: 64px;
}

.carousel-arrow {
  position: absolute;
  display: flex;
  justify-content: center;
  top: 0;
  bottom: 64px;
  margin-block: auto;
  height: fit-content;
  width: 48px;
  background-color: white;
  border: none;
  font-size: 3rem;
  padding: 0;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 100ms;
}

.carousel-arrow:hover,
.carousel-arrow:focus {
  opacity: 1;
}

.carousel-arrow--prev {
  left: 0;
}

.carousel-arrow--next {
  right: 0;
}

.carousel-container {
  width: 100%;
  padding-block: 16px 32px;
  margin: 16px 48px;
  overflow-x: auto;
  display: flex;
  width: 100%;
  gap: 8px;
  align-items: center;
  scroll-snap-type: x mandatory;
  flex-flow: row nowrap;
  scroll-behavior: smooth;
}

.carousel-container::-webkit-scrollbar {
  height: 14px;
  width: calc(100% - 48px);
}

.carousel-container::-webkit-scrollbar-track {
  background: #b1b3b399;
}

.carousel-container::-webkit-scrollbar-thumb {
  background: #29AB87;
}

.carousel-container::-webkit-scrollbar-track-piece:start {
  background: #29AB87;
}

.carousel-slide {
  flex: 1 0 30%;
  aspect-ratio: 1;
  flex-flow: column nowrap;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #bae;
  scroll-snap-align: center;
}

@media (max-width: 600px) {
  .carousel-slide {
    flex: 1 0 90%;
  }
}

footer {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  text-align: center;
  padding: 16px;
  background-color: #eaeaea90;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

footer p {
  color: #221133;
  margin: 0;
}

footer a {
  text-decoration: none;
  color: inherit;
}

const carousel = document.querySelector(".carousel-container");
const slide = document.querySelector(".carousel-slide");

function handleCarouselMove(positive = true) {
  const slideWidth = slide.clientWidth;
  carousel.scrollLeft = positive ? carousel.scrollLeft + slideWidth : carousel.scrollLeft - slideWidth;
}