triplexlab/examples/slide/swiper_custom/css/swiper-custom.css

프론트엔드 개발자가 프로젝트할때 흔하고 많이 하는 작업들을 나만의 플러그인으로 만들었습니다.\ ES6의 class기반으로 만들었고, 공부하는 차원으로 만들었습니다.🧑🏻‍💻🧑🏻‍💻

body,html{position:relative;height:100%}

body{background:#eee;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;color:#000;margin:0;padding:0}

.swiper-container{width:100%;height:100%}
.swiper-slide{text-align:center;font-size:18px;background:#fff;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center}

@keyframes dash {
    from {
      stroke-dashoffset: 1000;
    }
    to {
      stroke-dashoffset: 0;
    }
}
/* .dotcircle에 관한 스타일 ST */
.swiper-pagination-bullet a {cursor: default;}
.swiper-pagination-clickable .swiper-pagination-bullet a {cursor: pointer;}
.swiper-pagination-bullet-active.dotcircle .strok{
  display: inline-block;
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
  animation: dash 90s linear;
  animation-iteration-count: unset;
}
.swiper-pagination-bullet-active.dotcircle .paused{animation-play-state:paused}
/* .dotcircle에 관한 스타일 ED */

/** paused 에 관한 스타일 ST */
.swiper-paused {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 2;
  -webkit-transform: translate(-103px,-8px);
  -ms-transform: translate(-103px,-8px);
  transform: translate(-103px,-8px);
}
.swiper-paused .paused {display: inline-block;}
/** paused 에 관한 스타일  */