jQuery / Plugin / slick / 슬라이더 플러그인

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

기본 사용법

  • 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

Related Posts

jQuery / Method / .slideToggle() - 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 하는 메서드

jQuery / Method / .slideToggle() - 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 하는 메서드

.slideToggle() .slideToggle()은 보이지 않는 요소는 아래쪽으로 서서히 나타나게 하고, 보이는 요소는 위쪽으로 서서히 사라지게 합니다. 문법 .slideToggle( ) duration 요소가 나타나거나 사라질 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 나타나거나 사라지는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete 요소가 나타나거나 ...

jQuery / Method / jQuery.trim() - 문자열에 있는 공백(whitespace)을 제거하는 메서드

jQuery / Method / jQuery.trim() - 문자열에 있는 공백(whitespace)을 제거하는 메서드

jQuery.trim() jQuery.trim()은 문자열에 있는 공백(whitespace)을 제거합니다. 주의할 점은 문자열 앞과 뒤에 있는 공백은 제거하지만, 문자열 중간에 있는 공백은 제거하지 않는다는 것입니다. 문법 jQuery.trim( str ) 예제 같은 문자열에 대하여, 두 번째 줄은 jQuery.trim()을 적용하였습니다. <!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> ...

jQuery / Method / .addBack() - 현재 선택한 요소와 함께 이전에 선택한 요소도 선택하는 메서드

jQuery / Method / .addBack() - 현재 선택한 요소와 함께 이전에 선택한 요소도 선택하는 메서드

.addBack() .addBack()은 현재 선택한 요소와 함께 이전에 선택한 요소도 선택하게 합니다. 문법 .addBack( ) 예를 들어 $( 'ul' ).find( 'li' ).addBack() 은 ul의 하위 요소 중 li를 선택하고, 추가적으로 처음 선택했던 ul을 선택합니다. 예제 div 요소 안에서 클래스 값이 ip인 p 요소를 찾아 선택을 하고, 추가로 div 요소도 선택하여 테두리를 만듭니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / Method / .find() - 어떤 요소의 하위 요소 중 특정 요소를 찾는 메서드

jQuery / Method / .find() - 어떤 요소의 하위 요소 중 특정 요소를 찾는 메서드

.find() .find()는 어떤 요소의 하위 요소 중 특정 요소를 찾을 때 사용합니다. 문법 .find( selector ) 예를 들어 $( 'h1' ).find( 'span' ) 은 h1 요소의 하위 요소 중 span 요소를 선택합니다. 예제 클래스 값으로 b를 갖는 p 요소의 하위 요소 중 클래스 값으로 ip를 갖는 span 요소를 찾아서 글자 크기를 2배로 만듭니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / Method / .removeAttr() - 선택한 요소의 특정 속성을 제거하는 메서드

jQuery / Method / .removeAttr() - 선택한 요소의 특정 속성을 제거하는 메서드

.removeAttr() .removeAttr()은 선택한 요소의 특정 속성을 제거한다. 문법 attributeName 속성을 제거한다. .removeAttr( attributeName ) 예를 들어 아래는 h1 요소에서 title 속성을 제거한다. $( 'h1' ).removeAttr( 'title' ); 예제 input 요소의 placeholder 속성을 제거한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> input { font-size: ...

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

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

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

jQuery / Method / .slideUp() - 요소를 위쪽으로 사라지게 하는 메서드

jQuery / Method / .slideUp() - 요소를 위쪽으로 사라지게 하는 메서드

.slideUp() .slideUp()는 선택한 요소를 위쪽으로 서서히 사라지게 합니다. 문법 .slideUp( ) duration 요소가 사라질 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 사라지는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete 요소가 사라진 후 수행할 작업을 정합니다. 예제 1 버튼을 클릭하면 파란색 배경의 div ...

jQuery / Method / .empty() - 선택한 요소의 내용을 지우는 메서드

jQuery / Method / .empty() - 선택한 요소의 내용을 지우는 메서드

.empty() .empty()는 선택한 요소의 내용을 지웁니다. 내용만 지울 뿐 태그는 남아있다는 것에 주의합니다. 태그를 포함한 요소 전체를 제거할 때는 .remove()를 사용합니다. 문법 .empty() 예를 들어 <h1>Lorem</h1> 일 때 $( 'h1' ).empty() 를 하면 다음처럼 바뀝니다. <h1></h1> 예제 버튼을 클릭하면 p 요소의 내용이 지워집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...

jQuery / Method / .appendTo() - 선택한 요소를 다른 요소 안에 넣는 메서드

jQuery / Method / .appendTo() - 선택한 요소를 다른 요소 안에 넣는 메서드

.appendTo() .appendTo()는 선택한 요소를 다른 요소 안에 넣습니다. 문법 .appendTo( target ) 예를 들어 $( 'p' ).appendTo( 'blockquote' ); 는 p 요소를 blockquote 요소 안으로 이동시킵니다. 예제 abc를 클래스 값으로 가지는 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> ...

jQuery / Method / .has() - 특정 요소를 가지고 있는 요소를 선택하는 메서드

jQuery / Method / .has() - 특정 요소를 가지고 있는 요소를 선택하는 메서드

.has() .has()로 특정 요소를 가지고 있는 요소를 선택할 수 있습니다. 문법 .has( selector ) 예를 들어 $( 'h1' ).has( 'span' ) 은 span 요소를 가지고 있는 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> ...