📋 Swiper

swiper는 슬라이드 라이브러리로 다양한 메소드와 설정을 지원해서 사용하기 매우 편하다. 그리고 하위 브라우저(IE9)에서도 동작하기 때문에 크로스 브라우징 측면에서도 뛰어나다.

1.Swiper 라이브러리 연결

제일 먼저 라이브러리를 사용하기 위해 cdn연결(파일 다운로드도 가능)

//CSS 불러오기<!-- 내 소스보다 우선 적용 되어야하기 때문에 내 소스보다 위에 작성 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"/>

//JS 불러오기
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

---

2. 기본 사용법

사용법은 매우 간단한데 각 태그에 class를 맞게 주고 옵션을 설정해주면 된다.
💡주의 할 점은 swiper 사용시 필수로 아래 구조와 같이 클래스 명을 지정해줘야 한다

swiper > swiper-wrapper > swiper-slide

HTML

<div class="swiper"> 
  <ul class="swiper-wrapper">
    <li class="swiper-slide"></li>
    <li class="swiper-slide"></li>
    <li class="swiper-slide"></li>
  </ul>
</div>

JS

const slide = new Swiper('#my-swiper', {
    slidesPerView : 'auto', // 한 슬라이드에 보여줄 갯수
    spaceBetween : 5, // 슬라이드 사이 여백
    loop : false, // 슬라이드 반복 여부
    loopAdditionalSlides : 1, // 슬라이드 반복 시 마지막 슬라이드에서 다음 슬라이드가 보여지지 않는 현상 수정
    autoplay : {  // 자동 슬라이드 설정 , 비 활성화 시 false
      delay : 3000,   // 시간 설정
    },
  
    pagination : false, // pager 여부
    navigation: {   // 버튼 사용자 지정
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },

---

3. 추가 옵션

• freeMode : false, // 슬라이드 넘길 때 위치 고정 여부
• autoHeight : true, // 현재 활성 슬라이드 높이 맞게 높이 조정
• resistance : false, // 슬라이드 터치 저항 여부
• slideToClickedSlide : true, // 해당 슬라이드 클릭시 슬라이드 위치로 이동
• allowTouchMove : true, // (false-스와이핑안됨)버튼으로만 슬라이드 조작이 가능
• watchOverflow : true // 슬라이드가 1개 일 때 pager, button 숨김 여부 설정
• slidesOffsetBefore : number, // 슬라이드 시작 부분 여백
• slidesOffsetAfter : number, // 슬라이드 마지막 부분 여백

3. 혹시나 작동이 잘 되지 않는다면?

1. css, js 파일 제대로 임포트 했는지 확인하기
2. swiper-wrapper, swiper-slide 클래스 이름 제대로 들어갔는지 확인하기(기본 클래스 이름을 가급적 유지)
3. 슬라이더를 여러 개 만들 때 각각의 변수명과 클래스 이름을 다 구분지어주기