슬라이더 플러그인

JavaScript

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 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 / 배열(Array) / 선언하기

배열 선언하는 방법 방법 1 jbAry라는 배열을 만듭니다. var jbAry = new Array(); 값을 배정합니다. jbAry = 'Lorem'; jbAry = 'Ipsum'; jbAry = 'Dolor'; 방법 2 var jbAry = ; 방법 3 var jbAry = new Array( 'Lorem', 'Ipsum', 'Dolor' ); 예제 배열에 값을 배정한 후 차례대로 출력하는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

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

JavaScript / Object / String.match() / 정규표현식에 맞는 문자열을 찾아 가져오는 메서드

.match() .match()는 정규표현식에 맞는 문자열을 찾아서 배열 객체로 반환합니다. 문법 string.match( regexp ) 만약 정규표현식에 맞는 문자열이 없다면 null을 반환합니다. 예제 Lorem Ipsum Dolor 문자열에서 Lo가 있는지, Lo를 포함한 단어가 있는지, Loi가 있는지 검색하고, 그 결과를 출력하는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript | match</title> </head> ...

JavaScript / 데이터 타입 / 문자열(String)

문자열(String) 문자열을 변수의 값으로 사용하려면 작은 따옴표(') 또는 큰 따옴표(")로 감쌉니다. var jb = 'Lorem ipsum dolor'; var jb = "Lorem ipsum dolor"; 문자열에 작은 따옴표가 있다면 큰 따옴표로, 큰 따옴표가 있다면 작은 따옴표로 감쌉니다. var jb = 'Lorem "ipsum" dolor.'; var jb = "Lorem 'ipsum' dolor."; 만약 작은 따옴표와 큰 따옴표가 같이 있다면 역슬래시를 이용합니다. var jb ...

JavaScript / Object / Element.childElementCount / 자식 요소의 개수를 반환하는 속성

.childElementCount .childElementCount는 자식 요소의 개수를 반환하는 속성입니다. 바로 아래 단계에 있는 자식 요소의 개수만 세고, 자식 요소의 자식 요소의 수는 세지 않습니다. IE는 버전 9 이상에서 사용할 수 있습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <ul> <li>Lorem</li> <li>Ipsum <span>Dolor</span></li> </ul> <script> var jb = document.getElementsByTagName( ...

JavaScript / Object / Element.getAttribute() / 요소의 속성 값을 가져오는 메서드

.getAttribute() .getAttribute()는 선택한 요소(element)의 특정 속성(attribute)의 값을 가져옵니다. 문법 element.getAttribute( 'attributename' ) 예를 들어 var jb = document.getElementById( 'xyz' ).getAttribute( 'title' ); 는 id의 값이 xyz인 요소의 title 속성 값을 변수 jb에 저장합니다. 예제 id의 값이 abc인 a 요소의 href 속성의 값을 가져와서 출력합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> ...

JavaScript / Object / Location / URL 정보 가져오는 객체

location location은 URL 정보를 가져오는 객체입니다. URL 전체 또는 일부의 정보를 가져올 수 있는데, 대표적인 것들은 다음과 같습니다. location location.host location.hostname location.href location.pathname location.protocol 예제 URL이 https://example.codingfactory.net/script/script.html 일 때, 각 객체 속성이 어떤 값을 가져오는지 알아보는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> h1 { ...

JavaScript / Object / Screen / 화면 정보 가져오는 객체

Screen Screen은 화면 정보를 가져오는 객체입니다. 속성은 다음과 같습니다. screen.width 화면의 가로 크기를 가져옵니다. screen.height 화면의 세로 크기를 가져옵니다. screen.availWidth 작업 표시줄이 차지하는 부분을 제외한 가로 크기를 가져옵니다. screen.availHeight 작업 표시줄이 차지하는 부분을 제외한 세로 크기를 가져옵니다. screen.colorDepth screen.pixelDepth IE는 버전 10 이상에서 사용할 수 있습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> ...

JavaScript / 함수 / String() / 숫자를 문자열로 변환하는 함수

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

JavaScript / Object / String.fromCharCode() / 유니코드를 문자로 바꾸는 메서드

.fromCharCode() .fromCharCode()는 유니코드를 문자로 바꾸는 메서드입니다. 문법 string.charCodeAt( index ) 예제 1 'HELLO'.charCodeAt( 0 ) H의 유니코드 72를 반환합니다. 예제 2 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> var jb = 'HELLO'; for ( i = 0; i < jb.length; i++ ) { document.write ( jb.charCodeAt( i ...

CODING FACTORY