[Task] swiper.js를 활용한 슬라이드 리팩토링 - 에이블런 프론트엔드부트캠프 17일차

1. HTML

HTML 구조를 조금 수정했다. swiperjs가 읽을 수 있도록 img를 감싸는 div를 없애고 클래스명을 수정하였다. 또한, progress bar를 만들기 위해 swiper-pagination div를 생성해주었다.

            <!-- swiper -->
            <article class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <img class="swiper-slide" src="../img/cosmetic-slide1.jpg" alt="">
                    <img class="swiper-slide" src="../img/cosmetic-slide2.jpg" alt="">
                    <img class="swiper-slide" src="../img/cosmetic-slide3.jpg" alt="">
                    <img class="swiper-slide" src="../img/cosmetic-slide4.jpg" alt="">
                </div>
                <div class="swiper-pagination"></div>
              </article>

 

2. CSS

progress bar 스타일링을 해주었다. 바가 차지 않았을 때는 서브컬러를, 찼을 때는 메인컬러로 표시되도록 스타일링 해주었다.

.swiper-pagination-progressbar {
    top: auto;
    bottom: 0;
    background: var(--lighten-2-color) !important;
}
.swiper-pagination-progressbar-fill {
    top: auto;
    bottom: 0;
    background: var(--primary-color) !important;
}

 

3. JS

swiper 라는 이름으로 javascript 파일을 생성하여 아래와 같은 코드를 작성해주었다. 사용자가 마우스로도 슬라이드를 넘길 수 있도록 grabCursor를 true로 지정했고, 무한 반복 재생을 위해 loop: true, autoplay 값을 넣어주었다.

var swiper = new Swiper(".mySwiper", {
    loop: true,
    grabCursor: true,
    
    pagination: {
      el: ".swiper-pagination",
      type: "progressbar",
    },
    autoplay: {
        delay: 1000,
        disableOnInteraction: true,
    }
  });