[jQuery/JavaScript] 이미지 슬라이드 (모바일 터치 최적화)

이번에 소개 해드릴 것은 swiper 라는 라이브러리 인데요~

간단하게 이미지 슬라이더를 구현 할 수 있는데 여기에 터치 스와이프 까지 지원해서 모바일에서 쓰기에도 매우 적합하다고 보여집니다~ 저도 실제로 한개의 데스크탑 슬라이드와 한개의 모바일 웹 사이트에 적용해봤는데 매우 자연스럽고 확장성도 좋았습니다.

공식 사이트는 여기 이구요.

스와이프 라이브러리 사용법은 아래와 같습니다.

new Swiper('.container', {
   pagination: '.swiper-pagination',
   paginationClickable: true,
   spaceBetween:0,
   loop: true,
});

위 처럼 작성 해주시면 자바스크립트 쪽은 끝 입니다. 매우 직관적이죠? 객체를 생성하면서 생성자에 인수를 넘기는 것 처럼 생겼습니다.

그럼 파라미터로 넘기는 옵션에 대해 대략적으로 설명드리겠습니다.

pagination - 일반적인 이미지 슬라이드들 보면 아래 동그라미로 현재 이미지 위치가 나오잖아요~ 이런걸 인디케이터 라고 하는데 그것을 출력할 html 요소의 클레스를 줍니다.

paginationClickable - 이 인디케이터들을 클릭할 수 있게 합니다. 예를 들어 2번째 동그라미를 클릭하면 2번째 이미지로 이동 되는 것이죠! 화살표를 쓰지않더라도 해당 이미지를 찾을 수 있게 됩니다.

spaceBetween - 말그대로 슬라이드간의 공백입니다. 전 이 부분 좀 이용해보려고 하다가 그냥 포기하고 0으로 따닥 붙어있게 했습니다..

loop - 루프를 true로 하게 되면 이미지 슬라이드의 끝 이후에 다시 처음으로 돌아가서 반복되게 됩니다. false이면 맨 끝에 도달했을 때 그 방향의 화살표가 비활성화 됩니다.

HTML도 간단합니다. 아래 소스코드와 같이 작성하시면 됩니다.

<div  class="swiper-container">
   <!-- Additional required wrapper -->
   <ul  class="swiper-wrapper">
      <!-- Slides -->
      <li class="swiper-slide">A</li>
      <li class="swiper-slide">B</li>
   </ul>
</div>

위 HTML은 swiper-pagination을 넣지 않았습니다~

애초에 개발할때 그냥 터치 스와이프로 넘기는 역할만 하게 하도록 화살표도 넣지 않고 페이지네이션도 넣지 않았습니다.

데스크탑용 사이트에 쓰시기 위해서 화살표와 인디케이터를 넣고 싶으시다면 아래와 같이 작성하시면 됩니다.

new Swiper('.main_celeb_box_pc', {
   pagination: '.swiper-pagination',
   paginationClickable: true,
   nextButton: '.swiper-button-next',
   prevButton: '.swiper-button-prev',
});

<div class="main_celeb_box_pc">
   <div>
      <div class="col-md-12 pb30"><img src="/images/main_cele_title.png" class="img-responsive center-block" /></div>
   </div>
   <div class="swiper-wrapper">
      <div class="swiper-slide">
         <div class="col-md-6 col-xs-12">A</div>
      </div>
      <div class="swiper-slide">
         <div class="col-md-6 col-xs-12">B</div>
      </div>
   </div>
   <!-- Add Arrows -->
   <div class="swiper-button-next"></div>
   <div class="swiper-button-prev"></div>
   <div class="swiper-pagination"></div>
</div> <!-- / main_celeb_box_pc -->

딱 봐도 아시겠죠?? HTML에서 class로 지정되있고 그것의 이름을 스와이프의 인자로 넘깁니다.

화살표나 인디케이터의 스타일이나 위치는 CSS로 조정하시면 됩니다.

좀 다른 팁으로 만약 CSS가 잘 안먹히신다면 속성 부여 후에 !important를 하시면 되는데요~ 

예를 들어 마진 값을 조정하셨는데 적용이 안됐다! 하시면

margin-left: 100px !important;

이런 식으로 속성에 우선순위를 높이시면 됩니다.

그럼 기존에 덮여진 스타일보다 우선순위가 높아져서 우선적으로 적용 되게 됩니다.

도움이 되셨다면 아래 공감 버튼을 꾹!

▼▼▼▼▼▼