Template:RedCircle/Carousel.css

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.my-swiper {
  position: relative;
  width: 800px;
  height: 450px;
  margin: 100px auto;
  overflow: hidden;
  background-color: cornflowerblue;
}

.swiper-list {
  position: absolute;
  top: 0;
  left: 0;
  width: 4000px;
  height: 100%;
  overflow: hidden;
  animation: swiper 10s steps(1, end) infinite;
  transition: left 1s linear;
}

.swiper-slide {
  width: 800px;
  height: 100%;
  float: left;
  overflow: hidden;
}

.swiper-slide a {
  display: block;
  height: 100%;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 分页 */
.pagination {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 45px;
  background: rgba(255, 255, 255, 0.3);
  text-align: center;
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 2px;
  background: #fff;
  border-radius: 50%;
}
/* 橙色小圆点 */
.dot.active {
  position: absolute;
  left: 356px;
  top: 18px;
  width: 11px;
  height: 11px;
  margin: 0;
  background: tomato;
  animation: swiper-dot 10s steps(1, end) infinite;
  transition: left 1s linear;
}

@keyframes swiper {

  0%,
  100% {
    left: 0;
  }

  20% {
    left: -800px;
  }

  40% {
    left: -1600px;
  }

  60% {
    left: -2400px;
  }

  80% {
    left: -3200px;
  }

  /* 100% {
    left: -3200px;
  } */
}
@keyframes swiper-dot {

  0%,
  100% {
    left: 358px;
  }

  20% {
    left: 376px;
  }

  40% {
    left: 395px;
  }

  60% {
    left: 413px;
  }

  80% {
    left: 432px;
  }
}
/* [[Category:在模板名字空间下的CSS页面]] */