swiper 적용방법

Swiper.js 사용 방법과 CSS 수정 방법 정리

 

1. Shadow DOM 있는 Web Component 방식

 

---

 

• 사용 예: 
• 특징: Shadow DOM 내부에 스타일이 캡슐화되어 있음
• CSS 수정 방법: ::part() 선택자 사용swiper-container::part(bullet) { background-color: gray; }
• swiper-container::part(bullet-active) { background-color: red; }
• 예시:
• JavaScript로 직접 수정 가능하지만 유지보수 어렵고 권장하지 않음

 

 

1. Shadow DOM 없는 일반 Swiper 방식

 

---

 

• 사용 예: 
• 특징: Shadow DOM 없음, 기존 HTML 구조 그대로 사용
• 설치:

 

•  
• HTML 구조:

<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="./img/web/kimpo.png" /></div>
    <div class="swiper-slide"><img src="./img/web/kimpo_m.png" /></div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

 

•  
• JS 초기화:slidesPerView: 1,loop: true,navigation: { nextEl: “.swiper-button-next”, prevEl: “.swiper-button-prev” },});
• autoplay: { delay: 3500, disableOnInteraction: false },
• pagination: { el: “.swiper-pagination”, clickable: true },
• spaceBetween: 0,
• const swiper = new Swiper(”.mySwiper”, {
• CSS 수정 방법:.swiper-pagination-bullet { background-color: gray; width: 10px; height: 10px; }.swiper-button-next, .swiper-button-prev { color: black; }
• .swiper-pagination-bullet-active { background-color: red; }
• .swiper-slide img { border-radius: 8px; width: 100%; height: auto; }

 

 

1. 비교

 

---

항목Shadow DOM(Web Component)일반 Swiper

CSS 접근성	::part() 필요	일반 CSS 가능
유지보수	공식 API 따라야 함	직관적, 외부 CSS 직접 수정 가능
설치/사용	+ JS	+ JS
확장성	Web Component 중심	기존 HTML 구조 중심

결론:

 

• Shadow DOM 없는 일반 Swiper 방식이 CSS 관리 및 유지보수 측면에서 효율적