3d-slider/src/3d-slider.css

A customizable 3D cylindrical slider component for web projects.

.slider-container-3d {
  width: 100%;
  position: relative;
  perspective: var(--perspective);
  overflow: hidden;
}

.slider-container-3d .slider-3d {
  width: 90%;
  height: 80%;
  position: absolute;
  left: 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  transform-style: preserve-3d;
}

.slider-container-3d .slider-3d .card-3d {
  width: var(--card-width);
  height: var(--card-height);
  position: absolute;
  transform: rotateY(calc(var(--card-group-index) * var(--card-rotate)))
    translateZ(var(--translate-z));
}

/* Navigate container */
.navigate-container {
  width: var(--nav-width);
  height: 10%;
  position: absolute;
  bottom: var(--btn-width);
  left: 50%;
  translate: -50% 0;
  z-index: 10;
}

.slider-container-3d .slider-prev-btn,
.slider-container-3d .slider-next-btn {
  width: var(--btn-width);
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  aspect-ratio: 1;
  cursor: pointer;
  opacity: var(--btn-opacity);
  user-select: none;
}

.slider-container-3d .slider-prev-btn {
  background: url(./images/slider-prev-btn.png);
  background-size: 100%;
  left: 1%;
}

.slider-container-3d .slider-next-btn {
  background: url(./images/slider-next-btn.png);
  background-size: 100%;
  right: 1%;
}

.slider-container-3d .slider-prev-group-btn,
.slider-container-3d .slider-next-group-btn {
  width: var(--btn-width);
  aspect-ratio: 1;
  position: absolute;
  cursor: pointer;
  border-radius: 50%;
  scale: 0.7;
  user-select: none;
}

.slider-container-3d .slider-prev-group-btn {
  background: url(./images/slider-prev-group-btn.png);
  background-size: 100%;
  left: 0;
}

.slider-container-3d .slider-next-group-btn {
  background: url(./images/slider-next-group-btn.png);
  background-size: 100%;
  right: 0;
}

/* Dots container */
.slider-container-3d .dots-container {
  width: 50%;
  height: 10%;
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  column-gap: calc(var(--slides) * 2%);
}

.slider-container-3d .dot {
  width: calc(10% / var(--slides));
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--dot-color);
}

.slider-container-3d .active-dot {
  background-color: var(--active-dot);
}

/* Animations for slider rotation */
.always-rotate-on {
  animation: always-rotate-on var(--always-rotate-on-duration)
    calc(var(--transition)) infinite linear;
  cursor: pointer;
}

.always-rotate-off {
  animation: always-rotate-off 1s ease-out;
  cursor: pointer;
}

@keyframes always-rotate-on {
  from {
    transform: rotateY(var(--current-rotate-angel));
  }
  to {
    transform: rotateY(var(--full-round));
  }
}
@keyframes always-rotate-off {
  from {
    transform: rotateY(var(--slider-current-rotate));
  }
  to {
    transform: rotateY(var(--current-rotate-angel));
  }
}