CSS Controls

.container {
  anchor-name: --carousel;
}

.carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 200px;
  gap: 1rem;
  scroll-marker-group: after;

  &::scroll-button(*) {
    position: fixed;
    position-anchor: --carousel;
    position-visibility: always;

    border: none;
    font-size: 1rem;
    background: white;
    color: cyan;
    aspect-ratio: 1;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 8px 0 rgb(0 0 0 / 0.2);
    transition: 100ms scale ease;
    z-index: 1;
  }

  &::scroll-button(*):hover {
    scale: 1.1;
  }

  &::scroll-button(*):active {
    scale: 0.98;
  }

  &::scroll-button(left) {
    position-area: inline-start center;
    left: calc(anchor(left) + 2.5rem);
    padding-right: 0.55rem;
    content: "◄" / "Previous";
  }

  &::scroll-button(right) {
    position-area: inline-end center;
    left: calc(anchor(right) - 2.5rem);
    padding-left: 0.55rem;
    content: "►" / "Next";
  }

  &::scroll-marker-group {
    position: fixed;
    position-anchor: --carousel;
    position-area: block-end;
    top: calc(anchor(bottom) - 3rem);
    position-visibility: always;
    margin: 10px;

    display: grid;
    grid-auto-columns: 1rem;
    grid-auto-flow: column;
    gap: 0.5rem;
  }

  > .slide {
    width: 100%;
    aspect-ratio: 3 / 4;

    &::scroll-marker {
      content: "";
      aspect-ratio: 1;
      border-radius: 50%;
      background: cyan;
      opacity: 0.3;
    }

    &::scroll-marker:hover {
      opacity: 0.8;
    }

    &::scroll-marker:target-current {
      opacity: 1;
    }
  }
}

<div class="container">
  <BlossomCarousel class="carousel">
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    ...
  </BlossomCarousel>
</div>