zent/css/swiper.css

一套前端设计语言和基于React的实现

.zent-swiper {
  position: relative;
  overflow: hidden;
}

  .zent-swiper__container {
    height: 100%;
    position: relative;
    -webkit-transition: ease-in-out;
    transition: ease-in-out;
  }

  .zent-swiper__arrow {
    cursor: pointer;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    z-index: 2;
  }

  .zent-swiper__arrow-icon {
      color: #e5e5e5;
      font-size: 20px;
    }

  .zent-swiper__arrow-left {
      left: 10px;
    }

  .zent-swiper__arrow-left .zent-swiper__arrow-icon {
        -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
      }

  .zent-swiper__arrow-right {
      right: 20px;
    }

  .zent-swiper-light .zent-swiper__arrow-icon {
      color: #fff;
    }

  .zent-swiper__dots {
    list-style: none;
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    z-index: 1;
  }

  .zent-swiper__dots-item {
      display: inline-block;
      margin: 12px 5px;
      border: 0;
      cursor: pointer;
      background: #e5e5e5;
      height: 12px;
      width: 12px;
      border-radius: 100%;
      outline: none;
    }

  .zent-swiper__dots-large .zent-swiper__dots-item {
      height: 15px;
      width: 15px;
    }

  .zent-swiper__dots-small .zent-swiper__dots-item {
      height: 10px;
      width: 10px;
    }

  .zent-swiper__dots-black .zent-swiper__dots-item-active {
      background: #333;
    }

  .zent-swiper__dots-blue .zent-swiper__dots-item-active {
      background: #38f;
    }

  .zent-swiper__dots-red .zent-swiper__dots-item-active {
      background: #f44;
    }

  .zent-swiper__dots-green .zent-swiper__dots-item-active {
      background: #4b0;
    }