[신입16] JQuery Slider Plugin 기초 (Slick, Swiper, bxSlider)

회사에서 사이트를 만들다 보면 대부분 슬라이더가 들어가야 한다(특히 메인 비주얼). 우리 팀은 bxSlider가 기본 세팅으로 되어있다. 잘은 모르지만, 전에 작업했던 것을 참고하거나 검색하여 원하는 기능을 구현해낸다. 하지만 잘 알고 사용하는 것에 비해서 시간이 오래 걸리는 것 같아서 공부해보기로 마음 먹었다. 가능하면 회사에서 사용하기 편하게 샘플도 미리 만들어놓을 예정이다.
유튜브에 검색해보니 리베하얀님이 JQuery Slider Plugin을 정리해놓은 재생목록이 있어서 이걸로 공부할 예정이다. bxSlider 뿐 아니라 Slick과 Swiper라는 Plugin을 알게 된 것도 큰 수확이다. 필요에 따라 선택적으로 사용할 수 있겠다.

1. Slick

LINK

<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

일단 CDN 방식으로 Slick의 CSS와 JQuery, Slick의 script를 차례로 넣는다.

HTML & JS

<div class="test">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>

$('.test').slick();

Slick 사이트의 Demo 내용을 HTML과 script에 대충 넣어주면 구현된다. 기능에 따라 버튼이 생기기도 한다.

CSS

CSS를 통해 원하는 디자인도 넣을 수 있다. 이건 패스

2. Swiper

Slick과 기초 사용법은 거의 동일하다.

LINK

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

HTML & JS

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

var swiper = new Swiper('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

3. bxSlider

위의 두 가지와 사용법은 거의 비슷하지만 다른 점은 CSS 파일을 꼭 링크하지 않아도 된다는 사실이다. 회사에서도 이렇게 사용한다.

LINK

<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

HTML & JS

$(document).ready(function(){
  $('.slider').bxSlider();
});

<div class="slider">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

몰랐던 사실은 bxSlider의 Default로 prev와 next버튼이 있다는 사실이다. 검색을 통해 HTML과 JS에 임의로 버튼을 추가했었는데 그럴 필요가 없었네... 기본 세팅에 bxSlider 세팅이 어떻게 되어있는지 확인해봐야겠다.

---

참고: 리베하얀 - JQuery Plugin