zarm/lib/carousel/style/index.css

基于 React 的移动端UI库

.za-carousel {
  --pagination-margin: var(--za-carousel-pagination-margin, 8px);
  --pagination-item-width: var(--za-carousel-pagination-item-width, 18px);
  --pagination-item-height: var(--za-carousel-pagination-item-height, 4px);
  --pagination-item-border-radius: var(--za-carousel-pagination-item-border-radius, 1px);
  --pagination-item-spacing: var(--za-carousel-pagination-item-spacing, 2px);
  --pagination-item-background: var(--za-carousel-pagination-item-background, rgba(255, 255, 255, 0.6));
  --pagination-item-active-background: var(--za-carousel-pagination-item-active-background, #fff);
  position: relative;
  overflow: hidden;
  touch-action: none;
}
.za-carousel__items {
  display: flex;
  transition-property: transform;
}

.za-carousel__item {
  flex-shrink: 0;
  position: relative;
  width: 100%;
  height: 100%;
  vertical-align: top;
  transition-property: transform;
  transform: translateZ(0);
}

.za-carousel__pagination {
  position: absolute;
}

.za-carousel__pagination__item {
  background: var(--pagination-item-background);
  cursor: pointer;
  border-radius: var(--pagination-item-border-radius);
}
.za-carousel__pagination__item--active {
  background: var(--pagination-item-active-background);
}

.za-carousel--horizontal .za-carousel__items {
  white-space: nowrap;
}

.za-carousel--horizontal .za-carousel__pagination {
  left: 50%;
  bottom: var(--pagination-margin);
  transform: translate3d(-50%, 0, 0);
}

.za-carousel--horizontal .za-carousel__pagination__item {
  display: inline-block;
  width: var(--pagination-item-width);
  height: var(--pagination-item-height);
}
.za-carousel--horizontal .za-carousel__pagination__item:not(:last-child) {
  margin-right: var(--pagination-item-spacing);
}

.za-carousel--vertical .za-carousel__items {
  flex-direction: column;
  touch-action: none;
}

.za-carousel--vertical .za-carousel__pagination {
  top: 50%;
  right: var(--pagination-margin);
  transform: translate3d(0, -50%, 0);
}

.za-carousel--vertical .za-carousel__pagination__item {
  width: var(--pagination-item-height);
  height: var(--pagination-item-width);
}
.za-carousel--vertical .za-carousel__pagination__item:not(:last-child) {
  margin-bottom: var(--pagination-item-spacing);
}