슬라이더 플러그인

jQuery
Created 2021-12-31 Last Modified 2022-01-01

slick은 jQuery 기반의 슬라이더 플러그인입니다.

홈페이지 : https://kenwheeler.github.io/slick/
GitHub : https://github.com/kenwheeler/slick/

1 기본 사용법
2 여러 슬라이드 동시에 보이기
3 해상도에 따라 옵션 변경하기

기본 사용법

jQuery, slick.css, slick-theme.css, slick.min.js를 연결합니다.
아래는 CDN을 이용하여 연결하는 코드입니다.

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />

아래와 같은 형식으로 마크업합니다. 클래스 값 slider는 변경해도 됩니다.

<div class="slider">
  <div><img src="images/slider-1920x1080-01.png" alt=""></div>
  <div><img src="images/slider-1920x1080-02.png" alt=""></div>
  <div><img src="images/slider-1920x1080-03.png" alt=""></div>
  <div><img src="images/slider-1920x1080-04.png" alt=""></div>
  <div><img src="images/slider-1920x1080-05.png" alt=""></div>
  <div><img src="images/slider-1920x1080-06.png" alt=""></div>
</div>

아래는 슬라이더를 실행시키는 코드입니다.

<script>
  $( document ).ready( function() {
    $( '.slider' ).slick( {
      setting-name-1: setting-value-1,
      setting-name-2: setting-value-2,
    } );
  } );
</script>

적절히 스타일링합니다.

<style>
  img {
    max-width: 100%;
    height: auto;
  }
  .slider {
    width: 1280px;
    margin: 0px auto;
  }
  .slick-prev:before, .slick-next:before {
    color: #444444;
  }
</style>

다음은 슬라이더가 자동으로 전환 시작하는 간단한 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Slick</title>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
    <script>
      $( document ).ready( function() {
        $( '.slider' ).slick( {
          autoplay: true,
          autoplaySpeed: 1000,
        } );
      } );
    </script>
    <style>
      img {
        max-width: 100%;
        height: auto;
      }
      .slider {
        width: 1280px;
        margin: 0px auto;
      }
      .slick-prev:before, .slick-next:before {
        color: #444444;
      }
    </style>
  </head>
  <body>
    <div class="slider">
      <div><img src="images/slider-1920x1080-01.png" alt=""></div>
      <div><img src="images/slider-1920x1080-02.png" alt=""></div>
      <div><img src="images/slider-1920x1080-03.png" alt=""></div>
      <div><img src="images/slider-1920x1080-04.png" alt=""></div>
      <div><img src="images/slider-1920x1080-05.png" alt=""></div>
      <div><img src="images/slider-1920x1080-06.png" alt=""></div>
    </div>
  </body>
</html>

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

여러 슬라이더를 동시에 보이게 하는 옵션은 slidesToShow와 slidesToScroll입니다.
slidesToShow로 한 번에 보이는 슬라이드 수를 정하고, slidesToScroll로 전환 시 이동할 슬라이드 수를 정합니다.
아래는 3개의 슬라이드를 보이고, 한 개씩 전환하는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Slick</title>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
    <script>
      $( document ).ready( function() {
        $( '.slider' ).slick( {
          autoplay: true,
          autoplaySpeed: 1000,
          slidesToShow: 3,
          slidesToScroll: 1,
        } );
      } );
    </script>
    <style>
      img {
        max-width: 100%;
        height: auto;
      }
      .slider {
        width: 1800px;
        margin: 0px auto;
      }
      .slider .slick-slide {
        margin: 10px;
      }
      .slick-prev:before, .slick-next:before {
        color: #444444;
      }
    </style>
  </head>
  <body>
    <div class="slider">
      <div><img src="images/slider-1080x1080-01.png" alt=""></div>
      <div><img src="images/slider-1080x1080-02.png" alt=""></div>
      <div><img src="images/slider-1080x1080-03.png" alt=""></div>
      <div><img src="images/slider-1080x1080-04.png" alt=""></div>
      <div><img src="images/slider-1080x1080-05.png" alt=""></div>
      <div><img src="images/slider-1080x1080-06.png" alt=""></div>
    </div>
  </body>
</html>

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

해상도에 따라 다른 옵션을 적용하고 싶다면 responsive 옵션을 이용합니다.
아래 예제는 다음과 같이 작동합니다.
기본 모양 : 슬라이드 5개 보이고 좌우 화살표 표시
768px 이하 : 슬라이드 3개 보이고 좌우 화살표 보이지 않기
600px 이하 : 슬라이드 1개 보이고 좌우 화살표 보이지 않기

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Slick</title>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
    <script>
      $( document ).ready( function() {
        $( '.slider' ).slick( {
          autoplay: true,
          autoplaySpeed: 1000,
          slidesToShow: 5,
          slidesToScroll: 1,
          responsive: [
            {
              breakpoint: 768,
              settings: {
                slidesToShow: 3,
                arrows: false,
              }
            },
            {
              breakpoint: 600,
              settings: {
                slidesToShow: 1,
                arrows: false,
              }
            }
          ]
        } );
      } );
    </script>
    <style>
      img {
        max-width: 100%;
        height: auto;
      }
      .slider {
        width: 80%;
        margin: 0px auto;
      }
      .slider .slick-slide {
        margin: 10px;
      }
      .slick-prev:before, .slick-next:before {
        color: #444444;
      }
    </style>
  </head>
  <body>
    <div class="slider">
      <div><img src="images/slider-1080x1080-01.png" alt=""></div>
      <div><img src="images/slider-1080x1080-02.png" alt=""></div>
      <div><img src="images/slider-1080x1080-03.png" alt=""></div>
      <div><img src="images/slider-1080x1080-04.png" alt=""></div>
      <div><img src="images/slider-1080x1080-05.png" alt=""></div>
      <div><img src="images/slider-1080x1080-06.png" alt=""></div>
    </div>
  </body>
</html>

만약 작은 화면의 세팅부터 하고 싶다면 다음 옵션을 추가합니다.

mobileFirst: true

jQuery

jQuery / Plugin / jquery.mb.YTPlayer / 유튜브 영상을 배경으로 사용하게 해주는 플러그인

컴퓨터 사양이 좋아지고 네트워크 속도가 빨라지면서, 홈페이지의 배경으로 동영상을 사용하는 곳이 많아지고 있습니다. 동영상을 배경으로 사용하는 방법은, 서버에 동영상을 올려놓고 video 태그로 넣는 방법과 유튜브에 업로드하고 불러오는 방법이 있습니다. 유튜브를 이용하면 트래픽 비용을 줄일 수 있다는 장점이 있는데, 영상 제목이나 콘트롤 바, 공유 등 불필요한 내용까지 보여준다는 단점도 있습니다. 그 단점을 ...

jQuery / Method / .after() - 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드

개요 .after()는 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킬 수 있다. 문법 문법은 다음과 같다. .after( content ) 예를 들어 다음은 h1 요소 뒤에 Hello를 내용으로 갖는 p 요소를 추가한다. $( 'h1' ).after( '<p>Hello</p>' ); 다음은 클래스 값으로 a를 갖는 h1 요소 뒤에 클래스 값으로 b를 갖는 p 요소를 이동시킨다. $( 'h1.a' ...

jQuery / input 값 변화 감지하기 / change, keyup

input 요소에 값을 입력하거나 선택했을 때, 이를 감지하여 어떤 작업을 할 수 있다. input의 type이 number일 때, checkbox일 때, radio일 때로 나누어서 어떻게 감지하는지 알아본다. input type="number" 숫자를 입력할 수 있는 폼 두 개를 만들고, 값을 입력했을 때 두 수의 곱을 출력해보자. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

jQuery / Method / .replaceWith() - 선택한 요소를 다른 것으로 바꾸는 메서드

.replaceWith() .replaceWith()는 선택한 요소를 다른 것으로 바꿉니다. 문법 .replaceWith( newContent ) 예를 들어 h1 요소를 abc로 바꾸고 싶다면 다음과 같이 합니다. $( 'h1' ).replaceWith( 'abc' ); h1 요소의 내용 뿐 아니라 h1 태그까지 지우고 바꾼다는 것에 주의합니다. newContent에는 특정 요소가 들어갈 수 있습니다. 예를 들어 $( 'h1' ).replaceWith( $( 'p.a' ) ); 는 h1 요소를 클래스 값이 a인 p ...

jQuery / Selector / :nth-child() - 형제 요소 중 an+b번째 요소들을 선택하는 선택자

:nth-child()는 형제 요소 중 an+b번째 요소들을 선택하는 선택자입니다. 문법 $( ':nth-child(an+b)' ) a와 b는 상수, n은 변수입니다. n에는 음이 아닌 정수(0, 1, 2, 3, ···)가 차례대로 대입됩니다. an+b 대신에 even, odd를 사용할 수 있습니다. 예제 $( 'ol li:nth-child(2)' ) ol 요소의 자식 요소인 li의 형제 요소 중에서 두 번째 요소를 선택합니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / Method / .insertBefore() - 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드

.insertBefore()는 특정 요소 앞에 요소를 추가 또는 이동한다. 문법 p 요소 앞에 <h1>Hello</h1>를 추가한다. $( '<h1>Hello</h1>' ).insertBefore( 'p' ); p 요소 앞으로 h1 요소를 이동한다. $( 'h1' ).insertBefore( 'p' ); 예제 1 p 요소 앞에 <h1>Hello</h1>를 추가한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...

jQuery / 천 단위 쉼표 만드는 방법

예제 1 텍스트로 출력된 숫자에 천 단위 쉼표를 넣는다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ).ready( function() { $( '#jb' ).text( ...

jQuery / 동적 셀렉트(select) 만드는 방법

앞의 select에서 선택을 하면, 그 값에 따라 뒤의 select의 선택 항목이 바뀌게 하는 것을 동적 셀렉트라고 하는 거 같다. 예를 들어 앞의 select에서 서울을 선택하면, 뒤의 select의 option이 강남구, 송파구 등으로 바뀌는 것. 아래는 jQuery를 이용해서 만든 간단한 동적 셀렉트 예제이다. onchange을 이용하여 값의 변화를 인식하고 optionChange() 함수를 실행한다. 변수 a에는 A를 선택했을 ...

jQuery / 요소가 순서대로 나타나게 하는 방법

.animate()로 요소를 나타내기 다음과 같이 간단한 예제를 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { box-sizing: border-box; margin: 0px; } .jb { height: 200px; padding: 20px; text-align: center; color: ...

jQuery / Method / .clone() - 선택한 요소를 복제하는 메서드

.clone() .clone()은 선택한 요소를 복제합니다. 문법 .clone( ) 예를 들어 $( '.ab' ).clone().appendTo( 'h1' ); 은 ab를 클래스 값으로 가지는 요소를 복제하여 h1 요소에 넣습니다. 예제 span 요소를 복제하여 h1 태그 안에 넣습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> ...