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>

Related Posts

JavaScript / Object / Array.concat() / 기존 배열에 원소 또는 배열을 추가하여 새 배열 만들기

JavaScript / Object / Array.concat() / 기존 배열에 원소 또는 배열을 추가하여 새 배열 만들기

.concat() .concat() 속성을 이용하여 기존 배열에 원소 또는 배열을 추가하여 새 배열을 만들 수 있습니다. 문법 var jbAry2 = jbAry1.concat( 'abc' ); jbAry1 배열에 문자열 abc를 추가하여 jbAry2 배열을 만듭니다. var jbAry3 = jbAry1.concat( jbAry2 ); 두 배열 jbAry1과 jbAry2를 합하여 새로운 배열 jbAry3을 만듭니다. 예제 다음의 두 예제는 같은 결과를 만듭니다. <!doctype html> <html lang="ko"> <head> ...

JavaScript / Object / String.repeat() / 문자열을 반복한 값을 반환하는 메서드

JavaScript / Object / String.repeat() / 문자열을 반복한 값을 반환하는 메서드

.repeat() .repeat() – 문자열을 반복한 값을 반환하는 메서드입니다. IE는 Edge부터 지원합니다. 문법 string.repeat( count ) 예제 'abc'.repeat( 2 ) abc를 두 번 반복한 abcabc를 반환합니다.

JavaScript / Object / Math.random() / 난수(랜덤 숫자) 만드는 속성

JavaScript / Object / Math.random() / 난수(랜덤 숫자) 만드는 속성

Math.random() Math.random()는 난수(랜덤 숫자)를 만듭니다. 문법 Math.random() 0.673172894273546와 같은 0 이상 1 미만의 난수를 만듭니다. 예제 1 - 난수 만들기 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; ...

JavaScript / 사업자등록번호, 전화번호 유효성 검사하는 방법

JavaScript / 사업자등록번호, 전화번호 유효성 검사하는 방법

사업자등록번호 유효성 검사 사업자등록번호를 입력하고 전송할 폼을 만들고, 버튼 클릭 시 checkBrn() 함수를 호출한다. <input type="text" name="brn" id="brn"> <input type="button" value="Check" onclick="checkBrn();"> 메시지를 출력할 공간을 만든다. <p id="checkBrnMessage"></p> 입력한 값을 변수 brn에 담는다. var brn = document.getElementById( "brn" ).value; 정규표현식 /^{5}$/를 이용하여 유효성 검사를 한다. 000-00-00000 형식이 맞으면 OK, 그렇지 않으면 NOT OK를 출력한다. if ( /^{5}$/.test( brn ) ) ...

JavaScript / Object / String.includes() / 특정 문자열을 포함하는지 확인하는 메서드

JavaScript / Object / String.includes() / 특정 문자열을 포함하는지 확인하는 메서드

.includes() .includes()는 문자열이 특정 문자열을 포함하는지 확인하는 메서드이다. IE는 Edge부터 지원한다. 문법 string.includes( searchString, length ) searchString : 검색할 문자열로 필수 요소이다. 대소문자를 구분한다. length : 검색을 시작할 위치이다. 선택 요소로, 값이 없으면 전체 문자열을 대상으로 한다. 예제 abzcd가 z를 포함하는지 검사한다. z를 포함하므로 true를 반환한다. 'abzcd'.includes( 'z' ) zcd가 z를 포함하는지 검사한다. z를 포함하므로 true를 반환한다. 'abzcd'.includes( 'z', 2 ...

JavaScript / Object / String.substr() / 문자열 추출하는 메서드

JavaScript / Object / String.substr() / 문자열 추출하는 메서드

.substr() .substr()은 문자열에서 특정 부분만 골라낼 때 사용하는 메서드입니다. 문법 string.substr( start, length ) start로 시작 위치를 정하고 length로 잘라낼 문자열의 길이를 정합니다. 예를 들어 var str = '123456789'; document.write( '<p>substring( 1, 5 ) : ' + str.substr( 1, 5 ) + '</p>' ); 는 23456을 출력합니다. start 값은 필수이고, length를 지정하지 않으면 문자열의 끝까지를 가져옵니다. 예제 <!doctype html> <html lang="ko"> ...

JavaScript / Object / .innerText, .innerHTML

JavaScript / Object / .innerText, .innerHTML

.innerText .innerText은 특정 요소의 텍스트를 가져오거나, 특정 요소의 텍스트를 변경한다. 문법 1 - 내용 가져오기 element의 내용을 가져온다. element.innerText id의 값이 xyz인 요소의 내용을 변수 jb에 저장한다. var jb = document.getElementById( 'xyz' ).innerText; 예제 1 id의 값이 jb인 요소의 텍스트를 가져와서 출력한다. 태그 등은 제외한 텍스트만 가져온다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

JavaScript / Object / document.writeln()

JavaScript / Object / document.writeln()

.writeln() .writeln()은 문서에 문자, 코드 등을 쓰는 메서드입니다. .write()와 다른 점은 줄바꿈 기호가 들어간다는 것입니다. 예제 .writeln()에는 줄바꿈 기호가 들어갑니다. 하지만 HTML 특성 상 한 칸 띄어쓴 것처럼 보입니다. pre 태그로 감싸면 줄바꿈이 제대로 표현됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <p><strong>document.write</strong></p> <script> document.write( ...

JavaScript / Object / Array.splice() / 배열에서 특정 범위의 값들을 추출하고, 그 자리에 새로운 값을 넣는 속성

JavaScript / Object / Array.splice() / 배열에서 특정 범위의 값들을 추출하고, 그 자리에 새로운 값을 넣는 속성

.splice() .splice()는 배열에서 특정 범위의 값들을 추출하고, 그 자리에 새로운 값을 넣습니다. 문법 array.splice( start, count ) 예를 들어 jbAry.splice( 1, 2 )는 jbAry  배열의 두번째 값부터 2개를 추출합니다. array.splice( start, count, value1, value2, ... ) 예를 들어 jbAry.splice( 1, 2, 'abc', 'def' )는 jbAry  배열의 두번째 값부터 2개를 추출하고, 그 자리에 abc, def 두 값을 ...

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의 값이 ...