platojs/components/core/styles/slider.css

Libraries of PLATO

.c-slider {
  position: relative;
  overflow: hidden;
}

.c-slider-content {
  position: relative;
  height: 100%;

  &.transition {
    transition: transform 0.2s;
  }

  & > * {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translate3d(-200%, 0, 0);
  }

  & > .c-slider-prev {
    transform: translate3d(-100%, 0, 0);
  }

  & > .c-slider-next {
    transform: translate3d(100%, 0, 0);
  }

  & > .c-slider-active {
    transform: translate3d(0%, 0, 0);
  }
}

.c-slider-indicators {
  position: absolute;
  width: 100%;
  bottom: dpr(20px);
  text-align: center;
  overflow: hidden;
}

.c-slider-indicator {
  display: inline-block;
  margin: dpr(8px);
  width: dpr(16px);
  height: dpr(16px);
  border-radius: 50%;
  background-color: color(white alpha(0.5));

  &.active {
    background-color: white;
  }
}