SwiperJs 슬라이드 옵션과 간단한 ajax를 통한 append에 대해 알아보자

이번 포스팅에서는 SwiperJs로 슬라이드를 구현해보도록 하겠다.

 

보통 메인 화면에 이미지 슬라이드를 구현하기 위해서도 많이 쓰인다. 

 

SwiperJs를 이용해서 여러 다양한 카테고리별 리스트를 슬라이드로 구현해야 했기 때문에 다른 카테고리를 서버에서 가져왔을 경우

 

swiperJs를 append하거나 update 하는 것도 한번 알아보도록 하겠다.

 

먼저 간단히 설치해보자

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>

 

슬라이드를 구현하기 위한 엘리먼트를 생성한다.

<div class="swiper-container">
  <div class="swiper-wrapper" id="swiper-wrapper">
    <div class="swiper-slide">슬라이드 영역 1</div>
    <div class="swiper-slide">슬라이드 영역 2</div>
    <div class="swiper-slide">슬라이드 영역 3</div>
  </div>
</div>

다음은 SwiperJs를 인스턴스화하고 각 옵션에 대해 알아보자

var swiperContainer = new Swiper('.swiper-container', {
    slidesPerView: 8, //슬라이드 엘리먼트를 몇개나 보여줄 것인지 설정
    spaceBetween: 10, //각 객체들 사이의 패딩 값
    breakpoints: {   //반응형 width에 따라 슬라이드 갯수, 객체들 사이의 패딩 값
	                  1000: { //width가 1000보다 클때
                              slidesPerView: 3,
                              spaceBetween: 10,
				      },
                      1500: { //width가 1500보다 클때
                              slidesPerView: 5,
                              spaceBetween: 10,
                      },
                      1900: { //width가 1900보다 클때
                              slidesPerView: 8,
                              spaceBetween: 10,
                      }
				},
    mousewheelControl: true,
    freeMode: true,//활성화하면 슬라이드에 고정된 위치가 없음 여러개 슬라이드 휙 움직임
    mousewheel: {
                  eventsTarget:"#element", //마우스휠 이벤트 적용 element
                  invert: true,
                  sensitivity : 3, //마우스 휠 민감도
                  thresholdDelta:5, //한번 휠에 몇개 이동해야하는 지 설정
                 }
});

 

더 필요한 옵션에 대한 설명은 아래 링크에서 확인해보면 된다.

각 이벤트 제어와 어떤 옵션에 따라 원하는 방향으로 설정해서 사용하면 되겠다.

swiperjs.com/swiper-api#modules

Swiper API

ajax로 서버에서 데이터를 받아왔을 때 해당 데이터를 append 하고 다시 init 하는 방법에 대해 알아보도록 하겠다.

 

var data={
    'sample':'sample data'
}

//먼저 기존에 있는 슬라이드 element를 삭제해보자
swiperContainer.removeAllSlides();

$.ajax({
    type:'post',
    data:data,
    url:'요청할 url',
    dataType:'json',
    success:function(data){
       var length = data.length;
       var htmlArr=[];
       
       for(var i=0;i<length;i++){
           htmlArr.push("<div class=\"swiper-slide\">data.sample</div>");
       }
       
       swiperContainer.appendSlide(htmlArr);
       swiperContainer.update();  //슬라이드를 새로 추가할 경우 꼭 update 함수를 호출하는게 좋다
       
    }
});

 

 

 

이번 포스팅에서는 SwiperJs 사용법에 대해 알아봤다.

여러 슬라이드에 관한 라이브러리가 있지만 swperjs처럼 다양한 옵션과 이벤트를 제어하고 커스터마이징 할 수 있어서 좋은 거 같다.

 

옵션에 대한 명세를 꼼꼼히 읽어보고 여러번 사용하다 보면 더 쉽게 활용할 수 있어서 다양하게 사용할 수 있을 것이다.