swiper)pagination 2개 적용하기

HTML (기본 스와이프 마크업)

<section class="process">
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">1</div>
      <div class="swiper-slide">2</div>
      <div class="swiper-slide">3</div>
    </div>
  </div>
  <!-- 페이지네이션 추가 -->
  <div class="swiper-pagination"></div>
  <div class="swiper-pagination2"></div>
</section>

CSS

/* 프로세스바 위치 및 크기 조정 */
#process .pro_pagination2 {
  position: absolute;
  top: 695px;
  width: 100%;
  height: 2px;
}
/* progressbar 배경색 (채워지기 전 바탕색) */
.swiper-pagination-progressbar {
  background: rgba(158, 158, 158, 0.178);
}
/* progressbar 채워지는 색 */
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background-color: var(--whoz-purple);
}

JS

var process = new Swiper(".swiper", {
  spaceBetween: 30,
  pagination: {
    el: ".pro_pagination",
    clickable: true,
    type : 'bullets',
  },
});
var processbar = new Swiper(".swiper", {
  pagination: {
    el: ".pro_pagination2",
    type: 'progressbar',
  },
});

// 메인 스와이퍼인 [process]에 서브 pagination인 [processbar]를 연동
process.controller.control = processbar;

bullets를 두개 넣으려 했지만 css가 동일하게 적용되버려서 progressbar와 bullets을 넣었다

css는 간략하게 작성해둔 것으로 부모요소의 css는 작성하지 않았다

 

css 참고사이트

https://stackoverflow.com/questions/44296672/ionic-2-slides-how-to-change-pagination-progress-color