JS Swiper 슬라이더 옵션 ✨

swiper 라는게 있네?
예전에 일일히 이미지 슬라이더를 만들던 나..............
이 젠 안 녕

swiper를 사용하면 쉽게 슬라이드를 만들 수 있다!
CDN 방식으로 사용할 수 있다.

swiper를 보통 이미지 슬라이더로 많이 사용하던데, CSS로 예쁘게 만들면
화면 상단 탭(카테고리)로도 사용이 가능 하다는 점을 알았다~!

  <div>
    <div class="swiper-container">
      <div class="swiper-wrapper" style="justify-content:space-between;">
        <div class="swiper-slide"><a href="#">Tab</a></div>
        <div class="swiper-slide"><a href="#">Tab</a></div>
        <div class="swiper-slide"><a href="#">Tab</a></div>
      </div>
    </div>
  </div>

기본 구조는 위와 같이 container->wrapper->slide 로 사용하면 된다.

style="justify-content:space-between;" 는 내가 추가한 CSS!
반응형을 구현하기 위해 작성해두었는데, 나중에도 요긴하게 쓸 것 같다.
justify-content 는 가로 좌우정렬에 대한 스타일이라고 생각하면 된다!

📃 Swiper 에 대한 옵션 ⬇️

1. initialSlide: number
  시작 위치를 정해주는 옵션. 
  나는 상단 카테고리를 swiper로 만들어서, 화면 밖으로 나간 탭을 고정시켜주기 위해 
  사용했다.
  
2. slidesPerView : auto or number
  한 번에 몇 개를 보여줄지 정하는 옵션.
  
3. spaceBetween : 기본값 0 or number
  슬라이드 간 간격을 정하는 옵션.
  
4. centeredSlides : boolean
  선택된 슬라이드를 가운데에 보이게 하는 옵션.

내가 요긴하게 쓸 것 같은 옵션 위주로 작성 ,,, 👩‍💻👀 !!!!