react-responsive-3d-carousel/dist/styles.css

React Responsive 3D Carousel

.react-responsive-3d-carousel__arrows {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.react-responsive-3d-carousel__arrows > button {
  overflow: visible;
  width: auto;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: color 0.2s ease-in-out;
  pointer-events: auto;
  color: var(--arrow-color, #ffffff);
}
.react-responsive-3d-carousel__arrows > button:hover {
  color: var(--arrow-hover-color, rgba(34, 34, 34, 0.5333333333));
}

.react-responsive-3d-carousel__arrows > button:first-of-type {
  left: 0;
}

.react-responsive-3d-carousel__arrows > button:last-of-type {
  right: 0;
}

.react-responsive-3d-carousel__arrows > button > * {
  width: var(--arrow-width, 2rem);
  height: var(--arrow-height, 2rem);
  filter: drop-shadow(var(--arrow-drop-shadow, none));
}
.react-responsive-3d-carousel__indicators {
  margin: 0;
  padding: 0;
  text-indent: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.react-responsive-3d-carousel__indicators > li {
  display: inline-block;
  margin: 0;
  padding: 0;
  text-indent: 0;
  line-height: 1;
  list-style: none;
  transition: color 0.2s ease-in-out;
  cursor: pointer;
  pointer-events: auto;
  color: var(--indicator-color, #ffffff);
}
.react-responsive-3d-carousel__indicators > li:hover {
  color: var(--indicator-active-color, #222222);
}

.react-responsive-3d-carousel__indicators > li > * {
  width: var(--indicator-width, 0.5rem);
  height: var(--indicator-height, 0.5rem);
  filter: drop-shadow(var(--indicator-shadow, none));
}

.react-responsive-3d-carousel__indicators > li.active {
  color: var(--indicator-active-color, #222222);
}
.react-responsive-3d-carousel__status {
  margin: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: inherit;
}
.react-responsive-3d-carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 1rem;
  box-sizing: border-box;
}

.react-responsive-3d-carousel__list {
  margin: 0;
  padding: 0;
  text-indent: 0;
  list-style: none;
  position: relative;
  transform-style: preserve-3d;
  perspective: var(--container-width, 1500px);
  width: 100%;
}

.react-responsive-3d-carousel__item {
  margin: 0;
  padding: 0;
  border: 0;
  text-indent: 0;
  line-height: 0;
  list-style: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  will-change: transform;
}

.react-responsive-3d-carousel__item.fixed-width.fixed-height > * {
  position: absolute;
  top: 0;
  left: 0;
}

.react-responsive-3d-carousel__item.fixed-width > * {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.react-responsive-3d-carousel__item.fixed-height > * {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.react-responsive-3d-carousel__arrows-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.react-responsive-3d-carousel__status-container {
  position: absolute;
  top: 0;
  right: 1rem;
  pointer-events: none;
}

.react-responsive-3d-carousel__indicators-container {
  position: absolute;
  left: 0;
  bottom: 1rem;
  width: 100%;
  pointer-events: none;
}