slider-js/style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.slider {
  /* overflow-x: hidden; */
  /* overflow-y: hidden; */
  overflow: hidden;
  width: 60%;
  margin: 0 auto;
  position: relative;
  height: 700px;
}

.slider__wrapper {
  display: flex;
  height: 100%;
  transition: 300ms ease transform;
  transform: translateX(calc(-1 * var(--x, 0) * 100%));
}

.slider__slide {
  flex: 1 0 100%;
}

.img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

.slider__left-btn,
.slider__right-btn {
  fill: white;
  position: absolute;
  top: 0;
  width: 80px;
  background: transparent;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0;
  transition: 300ms ease background;
}

.slider__left-btn:hover,
.slider__right-btn:hover {
  background: #0001;
}

.slider__left-btn {
  left: 0;
}

.slider__right-btn {
  right: 0;
}
.slider__dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  display: flex;
  gap: 20px;
}
.slider__dot {
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 9999px;
  border: none;
}

.slider__dot.current {
  background: cyan;
}