jquery

웹페이지에 간편하고 강력한 Swiper 슬라이더 플러그인 적용하기

RYUHA/ editor

  • 0 comments
  • 25,584 views
  • 2017년 10월 20일

http://idangero.us 에서 제공하는 swiper api 활용해보기

# 시작

 
 
http://idangero.us/swiper 에서 제공하는 슬라이더 api를 이용해서 가로 슬라이더를 구현해 봅니다.

 
먼저, 위의 홈페이지에 접속해 파일을 직접 다운 받거나 bower를 통해 설치할 수도 있습니다.
다운받거나 설치하여 만들어진 폴더 내의 dist 디렉토리로 들어가면 우리가 필요한 css, js 파일이 있습니다.
 
또 jquery를 cdn으로 이용했던 것처럼 똑같이 사용할 수 있습니다.
cdn을 사용하는 경우에는 만들고 있는 html 태그 위에 다음을 포함 시켜주어야 합니다!!
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.jquery.min.js"></script>

이때 3.x.x는 사용할 swiper의 버전을 확인해 꼭 입력해줍니다! 글을 작성하고 있는 지금은 3.3.1 버전이네용

직접 설치했을 경우, html 태그 위에 include시켜줘야합니다.
아래처럼, css 링크를 걸어주고 jquery 선언 해준 후에 swiper.js를 연결해야합니다.
<link rel="stylesheet" href="경로/swiper.min.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script>
<script src="경로/swiper.min.js"></script>
그리고 사용 법은 간단합니다! swiper 사이트의 데모 페이지를 들어가면 간단하게 활용할 수 있는 샘플들이 있습니다. 거기서 활용해서 사용자가 원하는 스타일의 슬라이드를 만들 수 있습니다.

 

css로 슬라이드의 사이즈도 조정이 가능합니다.
 

 

# html

 

기본 html 구조는,
<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 class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
          <div class="swiper-slide">Slide 6</div>
          <div class="swiper-slide">Slide 7</div>
          <div class="swiper-slide">Slide 8</div>
          <div class="swiper-slide">Slide 9</div>
          <div class="swiper-slide">Slide 10</div>
      </div>
      <!-- Add Scrollbar —> <!— 이 위치에 스크롤바나, 페이징이 들어가면 됨 —>
      <div class="swiper-scrollbar"></div>
</div>
이런 식으로 구성 됩니다.

 
 

# script

 

스크립트 부분에서 선언을 해줍니다.
var swiper = new Swiper(swiperContainer, parameters);  // initialize swiper with options
의 형태로 초기화, 선언을 합니다. 이때 각각의 요소는 다음과 같습니다.

 

swiperContainer – 슬라이더가 적용될 요소를 선택해줍니다. html요소의 형태나(div 등의) 문자타입(css 선택자)의 형태입니다. 꼭 필요한 요소이지요.

 

parameters – object, 객체형으로, 슬라이더의 옵션들을 정해줍니다. 옵셔널한 값으로, 적어도 안적어도 그만입니다.
 
기본적으로, 옵션으로 적어주면 좋거나 기억해야하는 파라미터들은 다음과 같습니다.

 

<script>
  var swiper = new Swiper('.swiper-container', {
    scrollbar: '.swiper-scrollbar’, // 스크롤바를 슬라이드 아래 생성함
    direction: 'horizontal’, // 슬라이드 진행방향은 수평(vertical하면 수직으로 움직임)
    slidesPerView: 1, // 한번에 보이는 슬라이드 갯수
    spaceBetween: 20, // 슬라이드 사이의 간격 px 단위
    mousewheelControl: true // 마우스 휠로 슬라이드 움직임
    // 더 외 추가 가능 요소들 
    });
</script>

 

이런 식으로 쉽게 간단하고 깔끔한 슬라이드를 만들 수 있습니다! 적용해보세요!!

(http://idangero.us/swiper 참조했습니다.)

RYUHA

만들어 보면서 하나씩 글 씁니당:)

Leave a Reply

avatar