JavaScript / Plugin / Swiper / 슬라이더 플러그인

Swiper는 널리 사용되는 슬라이더 플러그인 중의 하나입니다. 다양한 옵션을 제공하며, 해상도에 따라 다른 옵션을 줄 수 있어 반응형 사이트에 사용하기 좋습니다.

Swiper는 IE를 지원하지 않습니다. 만약 IE 지원이 중요하다면, IE를 지원하는 Swiper 구 버전을 사용하거나 다른 슬라이더를 사용하세요.

기본 사용법

  • 스크립트 파일과 CSS 파일을 연결합니다.
  • 다음은 CDN을 이용하여 연결하는 코드입니다.
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
  • 다음과 같은 형식으로 마크업합니다.
  • 클래스 값인 swiper는 변경해도 됩니다.
<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="images/slider-01.jpg" alt=""></div>
    <div class="swiper-slide"><img src="images/slider-02.jpg" alt=""></div>
    <div class="swiper-slide"><img src="images/slider-03.jpg" alt=""></div>
    <div class="swiper-slide"><img src="images/slider-04.jpg" alt=""></div>
    <div class="swiper-slide"><img src="images/slider-05.jpg" alt=""></div>
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
  • 위에서 정한 클래스 값을 선택자로 하여 슬라이더를 실행합니다.
  • 이미지 전환이 자동으로 시작되고, 슬라이드 좌우에 화살표가 나옵니다.
<script>
  const swiper = new Swiper( '.swiper', {
    autoplay: true,
    loop: true,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  } );
</script>
  • 전체 코드는 다음과 같습니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Swiper</title>
    <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
  </head>
  <body>
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="images/slider-01.jpg" alt=""></div>
        <div class="swiper-slide"><img src="images/slider-02.jpg" alt=""></div>
        <div class="swiper-slide"><img src="images/slider-03.jpg" alt=""></div>
        <div class="swiper-slide"><img src="images/slider-04.jpg" alt=""></div>
        <div class="swiper-slide"><img src="images/slider-05.jpg" alt=""></div>
      </div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
    <script>
      const swiper = new Swiper( '.swiper', {
        autoplay: true,
        loop: true,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      } );
    </script>
  </body>
</html>

옵션 사용법

  • 사용할 수 있는 옵션은 https://swiperjs.com/swiper-api에 설명되어 있습니다.
  • 예를 들어 슬라이더 전환을 자동으로 시작하고 싶다면 다음과 같이 옵션을 추가합니다.
<script>
  const swiper = new Swiper( '.swiper', {
    autoplay: true,
  } );
</script>
  • 좀 더 상세한 설정을 하고 싶다면 중괄호 안에 상세 옵션을 추가합니다.
  • 예를 들어 슬라이더 전환 자동 시작 시 하나의 슬라이더가 보여지는 시간을 정하고 싶다면 다음과 같이 설정합니다.
<script>
  const swiper = new Swiper( '.swiper', {
    autoplay: {
      delay: 1000,
    },
  } );
</script>

Pagination 추가하기

  • 페이지네이션을 추가하고 싶다면 <div class="swiper-pagination"></div>를 추가합니다.
<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="images/slider-01.jpg" alt=""></div>
    <div class="swiper-slide"><img src="images/slider-02.jpg" alt=""></div>
    <div class="swiper-slide"><img src="images/slider-03.jpg" alt=""></div>
    <div class="swiper-slide"><img src="images/slider-04.jpg" alt=""></div>
    <div class="swiper-slide"><img src="images/slider-05.jpg" alt=""></div>
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-pagination"></div>
</div>
  • pagination 옵션을 추가합니다.
  • el : 페이지네이션을 추가할 요소의 클래스 값
    types : 페이지네이션의 모양
    clickable : 클릭했을 때 이동 가능하게
<script>
  const swiper = new Swiper( '.swiper', {
    autoplay: true,
    loop: true,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
      clickable: true,
    },
  } );
</script>
  • 슬라이더 아래에 동그라미 형태의 페이지네이션이 추가되고, 클릭하면 해당 슬라이더로 이동합니다.

여러 슬라이드 동시에 보이기

  • 여러 슬라이드가 동시에 보이게 하고 싶다면 slidesPerView 옵션을 추가합니다. 값은 한 화면에 나오는 슬라이드 수입니다.
  • slidesPerGroup은 슬라이드 전환 시 넘어가는 슬라이드 수입니다.
  • 다음은 3개의 슬라이드가 보이고, 하나씩 전환하는 예입니다.
<script>
  const swiper = new Swiper( '.swiper', {
    autoplay: true,
    loop: true,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    slidesPerView: 3,
    slidesPerGroup : 1,
  } );
</script>

  • 이때 슬라이드의 높이를 유지한 채 좌우를 자르게 되는데, 전체 이미지가 다 나오게 하고 싶다면 스타일을 추가합니다.
<style>
  .swiper-slide img {
    max-width: 100%;
  }
</style>

해상도에 따라 옵션 변경하기

  • breakpoints를 이용하여 해상도에 따라 다른 옵션을 지정할 수 있습니다.
  • 아래는 768px 미만에서는 슬라이더가 2개, 768px 이상에서는 슬라이더가 3개, 1024px 이상에서는 슬라이더가 4개 나오게 하는 예제입니다.
<script>
  const swiper = new Swiper( '.swiper', {
    autoplay: true,
    loop: true,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    slidesPerView: 2,
    slidesPerGroup : 1,
    breakpoints: {
      768: {
        slidesPerView: 3,
      },
      1024: {
        slidesPerView: 4,
      }
    }
  } );
</script>
같은 카테고리의 다른 글
JavaScript / 반복문 / while, do - while, for

JavaScript / 반복문 / while, do - while, for

자바스크립트 반복문에는 while, do - while, for 세가지가 있습니다. while 문법 var i = 0; while ( i < 10 ) { // do something i++; } i의 값이 0부터 9일 때까지 실행되고 i의 값이 10이면 실행되지 않고 다음으로 넘어갑니다. i의 값을 증가시키는 i++을 꼭 넣어야 한다는 것에 주의해야 합니다. 만약 i++이 없으면 i의 값이 ...

JavaScript / Object / document.querySelectorAll() / 특정 CSS 선택자를 가진 모든 요소 선택하는 메서드

JavaScript / Object / document.querySelectorAll() / 특정 CSS 선택자를 가진 모든 요소 선택하는 메서드

.querySelectorAll() .querySelectorAll()은 특정 CSS 선택자를 가진 모든 요소를 배열로 가져오는 메서드입니다. 문법 document.querySelectorAll( 'selector' ) 예를 들어 document.querySelectorAll( '.abc' ) 는 클래스 값이 abc인 모든 요소를 가져옵니다. document.querySelectorAll( '.abc, .def' ); 클래스 값이 abc 또는 def인 모든 요소를 가져옵니다. 예제 1 클래스 값이 abc인 요소 중 두번째 요소의 색을 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

JavaScript / Object / String.indexOf(), String.lastIndexOf() / 특정 문자열이 있는 위치를 반환하는 메서드

JavaScript / Object / String.indexOf(), String.lastIndexOf() / 특정 문자열이 있는 위치를 반환하는 메서드

.indexOf() .indexOf()는 특정 문자열이 처음으로 나타나는 위치를 반환하는 메서드입니다. 문법 string.indexOf( value, start ) value : 필수 요소입니다. 찾으려는 문자열을 넣습니다. start : 선택 요소입니다. 검색을 시작할 인덱스 값입니다. 입력하지 않으면 처음부터 검색합니다. 대소문자를 구분합니다. 찾는 문자열이 없는 경우 -1을 반환합니다. 예제 'ABCABC'.indexOf( 'A' ) 처음 나오는 A의 인덱스의 값인 0을 반환합니다. 'ABCABC'.indexOf( 'A', 1 ) 인덱스 1 이후에 처음 나오는 A의 ...

IE8, IE9에서 placeholder 적용되게 하는 방법

IE8, IE9에서 placeholder 적용되게 하는 방법

input이나 textarea에 placeholder 속성으로 어떤 내용을 입력할 지 안내할 수 있다. HTML5에 새로 추가된 속성으로 label을 대체할 수 있는 유용한 속성이다. placeholder를 이용한 간단한 예는 다음과 같다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML Attribute | placeholder</title> <style> ...

JavaScript / 조건문 / switch

JavaScript / 조건문 / switch

가장 기본적인 조건문은 if입니다. 하지만 조건식에서 비교할 값이 많다면 코드가 길어지고 가독성이 떨어진다는 단점이 있습니다. 이럴 땐 switch를 사용하는 것이 좋습니다. 문법 switch ( condition ) { case value1: statement1; break; case value2: statement2; break; ... ...

JavaScript / 함수 / Number() / 문자열을 숫자로 변환하는 함수

JavaScript / 함수 / Number() / 문자열을 숫자로 변환하는 함수

Number() Number()은 문자열을 숫자로 변환하는 함수입니다. 문법 Number( object ) object : 문자열 또는 문자열을 값으로 하는 변수 등을 입력합니다. 숫자로 변환할 수 없는 값인 경우 NaN을 반환합니다. 예제 변수 c의 값은 문자 1과 문자 2를 더한 12입니다. 변수 d의 값은 숫자 1과 숫자 2를 더한 3입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

JavaScript / Object / String.length / 문자열의 길이 반환하는 속성

JavaScript / Object / String.length / 문자열의 길이 반환하는 속성

.length .length는 문자열의 길이를 반환하는 속성입니다. 문법 string.length 예를 들어 'abcd'.length 는 4입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> document.write( '<p>"1234".length : ' + '1234'.length + '</p>' ); document.write( '<p>"".length : ' + ''.length + '</p>' ); document.write( '<p>"한글".length : ' + '한글'.length + '</p>' ...

JavaScript / Object / String.startsWith() / 특정 문자열로 시작하는지 확인하는 메서드

JavaScript / Object / String.startsWith() / 특정 문자열로 시작하는지 확인하는 메서드

.startsWith() .startsWith()는 문자열이 특정 문자열로 시작하는지 확인한다, IE는 Edge부터 지원한다. 문법 string.startsWith( searchString, length ) searchString : 검색할 문자열로 필수 요소이다. 대소문자를 구분한다. length : 문자열 중 어디까지 검색할지 정한다. 선택 요소로, 값이 없으면 전체 문자열을 대상으로 한다. 예제 abcde가 a로 시작하는지 검사한다. a로 시작하므로 true를 반환한다. 'abcde'.startsWith( 'a' ) bcde가 a로 시작하는지 검사한다. a로 시작하지 않으므로 false를 반환한다. 'abcde'.startsWith( ...

JavaScript / Object / Array.every() / 모든 원소가 조건에 맞는지 검사하는 메서드

JavaScript / Object / Array.every() / 모든 원소가 조건에 맞는지 검사하는 메서드

.every() .every()는 배열의 모든 원소가 조건에 맞는지 검사하는 메서드입니다. 모든 원소가 조건을 만족하면 true, 하나라도 만족하지 않으면 false를 반환합니다. 예제 배열의 원소를 오름차순으로 검사하고, 조건을 만족하지 않는 원소가 있으면 검사를 중지하고 false를 반환합니다. 모든 원소를 다 검사했는데 조건을 만족하지 않는 원소가 없으면 true를 반환합니다. 원소가 없는 빈 배열은, 조건은 만족하지 않는 원소가 없으므로 무조건 ...

JavaScript / Plugin / Swiper / 슬라이더 플러그인

JavaScript / Plugin / Swiper / 슬라이더 플러그인

Swiper는 널리 사용되는 슬라이더 플러그인 중의 하나입니다. 다양한 옵션을 제공하며, 해상도에 따라 다른 옵션을 줄 수 있어 반응형 사이트에 사용하기 좋습니다. 홈페이지 : https://swiperjs.com/ GitHub : https://github.com/nolimits4web/swiper Swiper는 IE를 지원하지 않습니다. 만약 IE 지원이 중요하다면, IE를 지원하는 Swiper 구 버전을 사용하거나 다른 슬라이더를 사용하세요. 기본 사용법 스크립트 파일과 CSS 파일을 연결합니다. 다음은 CDN을 이용하여 연결하는 코드입니다. <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script> <link ...