Today I Learned/Task
[Task] swiper.js를 활용한 슬라이드 리팩토링 - 에이블런 프론트엔드부트캠프 17일차
YES_developNewbie
2024. 8. 7. 00:59
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,
}
});