swiper-slider 라이브러리 사용법(반응형)

<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>

<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

  <div class="swiper-container" id="my-swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">1</div>
        <div class="swiper-slide">2</div>
        <div class="swiper-slide">3</div>
        <div class="swiper-slide">4</div>
        <div class="swiper-slide">5</div>
    </div>
  </div>

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

  freeMode : false, // 슬라이드 넘길 때 위치 고정 여부
  autoHeight : true, // true로 설정하면 슬라이더 래퍼가 현재 활성 슬라이드의 높이에 맞게 높이를 조정합니다.
  a11y : false, // 접근성 매개변수(접근성 관련 대체 텍스트 설정이 가능) - api문서 참고!
  resistance : false, // 슬라이드 터치에 대한 저항 여부 설정
  slideToClickedSlide : true, // 해당 슬라이드 클릭시 슬라이드 위치로 이동
  centeredSlides : true // true시에 슬라이드가 가운데로 배치
  allowTouchMove : true, // false시에 스와이핑이 되지 않으며 버튼으로만 슬라이드 조작이 가능
  watchOverflow : true // 슬라이드가 1개 일 때 pager, button 숨김 여부 설정
  slidesOffsetBefore : number, // 슬라이드 시작 부분 여백
  slidesOffsetAfter : number, // 슬라이드 시작 부분 여백

  pagination : {   // 페이저 버튼 사용자 설정
    el : '.pagination',  // 페이저 버튼을 담을 태그 설정
    clickable : true,  // 버튼 클릭 여부
    type : 'bullets', // 버튼 모양 결정 "bullets", "fraction" 
    renderBullet : function (index, className) {  // className이 기본값이 들어가게 필수 설정
      return '<a href="#" class="' + className + '">' + (index + 1) + '</a>'
    },
    renderFraction: function (currentClass, totalClass) { // type이 fraction일 때 사용
      return '<span class="' + currentClass + '"></span>' +
             '<span class="' + totalClass + '"></span>';
    }
  },

  var swiper = new Swiper('#my-swiper', {
        slidesPerView: 1, //640~1024 해상도 외 레이아웃 뷰 개수
        spaceBetween: 10, //위 slidesPerview 여백
        breakpoints: { //반응형 조건 속성
          640: { //640 이상일 경우
            slidesPerView: 2, //레이아웃 2열
          },
          768: {
            slidesPerView: 3,
          },
          1024: {
            slidesPerView: 4,
          },
        }
  });