@opensig/opendesign/lib/carousel/style/index.css

<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制，使用 TypeScript</b></p>

.o-carousel {
  --carousel-arrow-size: var(--o-icon_size_control-l);
  --carousel-arrow-color: var(--o-color-info1);
  --carousel-arrow-color-hover: var(--o-color-info2);
  --carousel-arrow-color-active: var(--o-color-info3);
  --carousel-indicator-width: 48px;
  --carousel-indicator-height: 3px;
  --carousel-indicator-gap: 12px;
  --carousel-indicator-offset: 19px;
  --carousel-indicator-bg-color: var(--o-color-control1);
  --carousel-indicator-bg-color-hover: var(--o-color-control2);
  --carousel-indicator-bg-color-active: var(--o-color-control3);
  --carousel-indicator-bg-color-selected: var(--o-color-primary1);
}

.o-carousel {
  position: relative;
  visibility: hidden;
  background: transparent;
  opacity: 0;
  transition: opacity var(--o-duration-m1);
}

.o-carousel-visible {
  visibility: visible;
  opacity: 1;
}

.o-carousel-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.o-carousel-arrow-prev,
.o-carousel-arrow-next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  user-select: none;
  cursor: pointer;
  opacity: 1;
  transition: opacity var(--o-duration-m1) var(--o-easing-standard);
}

.o-carousel-hover-arrow .o-carousel-arrow-prev,
.o-carousel-hover-arrow .o-carousel-arrow-next {
  opacity: 0;
}
@media (hover: hover) {
  .o-carousel-hover-arrow:hover .o-carousel-arrow-prev,
  .o-carousel-hover-arrow:hover .o-carousel-arrow-next {
    opacity: 1;
  }
}

.o-carousel-arrow-prev {
  top: 50%;
  left: 12px;
  transform: translate3d(0, -50%, 0);
}

.o-carousel-arrow-next {
  top: 50%;
  right: 12px;
  transform: translate3d(0, -50%, 0);
}

.o-carousel-arrow-icon {
  font-size: var(--carousel-arrow-size);
  color: var(--carousel-arrow-color);
  background-color: var(--carousel-arrow-bg-color);
  border-radius: 50%;
  opacity: var(--carousel-arrow-opacity);
}
@media (hover: hover) {
  .o-carousel-arrow-icon:hover {
    opacity: var(--carousel-arrow-opacity-hover);
    color: var(--carousel-arrow-color-hover);
    background-color: var(--carousel-arrow-bg-color-hover);
  }
}

.o-carousel-indicator-wrap {
  position: absolute;
  left: 0;
  bottom: var(--carousel-indicator-offset);
  display: flex;
  justify-content: center;
  z-index: 2;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}

.o-carousel-indicator-item + .o-carousel-indicator-item {
  margin-left: var(--carousel-indicator-gap);
}

.o-carousel-indicator-bar {
  position: relative;
  width: var(--carousel-indicator-width);
  height: 12px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
@media (hover: hover) {
  .o-carousel-indicator-bar:hover .o-carousel-indicator-line {
    background-color: var(--carousel-indicator-bg-color-hover);
  }
}
.o-carousel-indicator-bar:active .o-carousel-indicator-line {
  background-color: var(--carousel-indicator-bg-color-active);
}

.o-carousel-indicator-line {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: var(--carousel-indicator-height);
  border-radius: var(--carousel-indicator-height);
  background-color: var(--carousel-indicator-bg-color);
  transition: background-color var(--o-duration-m2) var(--o-easing-standard);
}
.o-carousel-indicator-line::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--carousel-indicator-height);
  border-radius: var(--carousel-indicator-height);
  background-color: var(--carousel-indicator-bg-color);
  transform-origin: 0 center;
}

@keyframes indicator-grow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(100%);
  }
}
.o-carousel-indicator-bar-selected .o-carousel-indicator-line::after {
  background-color: var(--carousel-indicator-bg-color-selected);
}

.o-carousel-autoplay .o-carousel-indicator-line::after {
  transform: scaleX(100%);
}
.o-carousel-autoplay.is-playing .o-carousel-indicator-bar-selected .o-carousel-indicator-line::after {
  animation: indicator-grow var(--carousel-interval, "5000ms") var(--o-easing-linear);
}

.o-carousel-container-gallery {
  height: 100%;
  position: absolute;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
}
.o-carousel-container-gallery.is-animating {
  will-change: transform;
  transition: transform var(--o-duration-l) var(--o-easing-emphasized);
}

.o-carousel-item-gallery {
  position: absolute;
  left: 0;
  flex-shrink: 0;
}

.o-carousel-click-to-switch .o-carousel-item-gallery:not(.o-carousel-toggle-current) {
  cursor: pointer;
}

@keyframes carousel-toggle {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.o-carousel-container-toggle {
  height: 100%;
  position: absolute;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
}

.o-carousel-item-toggle {
  position: absolute;
  left: 0;
  flex-shrink: 0;
  z-index: 0;
  opacity: 0;
  height: 100%;
  width: 100%;
}

.o-carousel-toggle-current {
  opacity: 1;
  z-index: 2;
}

.o-carousel-toggle-in {
  animation: carousel-toggle var(--o-duration-l) var(--o-easing-emphasized) forwards;
  z-index: 2;
}

.o-carousel-toggle-out {
  animation: carousel-toggle var(--o-duration-l) var(--o-easing-emphasized) reverse forwards;
  z-index: 1;
}

@media (min-width: 1201px) and (max-width: 1440px) {
  .o-carousel {
    --carousel-arrow-size: var(--o-icon_size_control-m);
    --carousel-indicator-width: 40px;
    --carousel-indicator-height: 3px;
    --carousel-indicator-gap: 8px;
    --carousel-indicator-offset: 11px;
  }
}
@media (max-width: 1200px) {
  .o-carousel {
    --carousel-arrow-size: var(--o-icon_size_control-xs);
    --carousel-indicator-width: 24px;
    --carousel-indicator-height: 2px;
    --carousel-indicator-gap: 4px;
    --carousel-indicator-offset: 7px;
  }
}