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
같은 카테고리의 다른 글
jQuery / Selector / :contains() - 특정 문자열을 포함한 요소를 선택하는 선택자

jQuery / Selector / :contains() - 특정 문자열을 포함한 요소를 선택하는 선택자

:contains()는 특정 문자열을 포함한 요소를 선택하는 선택자이다. 문법 문자열 포함 여부를 따질 때 대소문자를 구분한다는 점에 주의한다. $( ':contains( text )' ) 예를 들어 다음은 ab 문자열을 포함한 p 요소를 선택한다. $( 'p:contains( "ab" )' ) 예제 jb를 포함한 p 요소를 선택해서 글자를 빨간색으로 만든다. 첫번째 문단은 jb가 없어서, 세번째 문단은 jb가 있지만 대문자여서 선택되지 않는다. <!doctype html> <html lang="ko"> ...

jQuery / Method / .load()

jQuery / Method / .load()

.load() .load()는 다른 문서 등에서 내용을 가져와 현재 문서에 나타냅니다. 문법 .load( url ) 예를 들어 a.html의 p 요소를 가져와 div 요소 안에 넣으려면 다음과 같이 합니다. $( 'div' ).load( 'a.html p' ); 예제 load-02.html에서 id 값이 ab인 요소를 가져와서, 현재 문서의 id 값이 xy인 요소 안에 넣습니다. load-01.html <!doctype html> <html lang="ko"> ...

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 / .each() - 선택한 요소 각각에 대하여 함수를 실행시키는 메서드

jQuery / Method / .each() - 선택한 요소 각각에 대하여 함수를 실행시키는 메서드

.each() .each()는 선택한 요소가 여러 개일 때 각각에 대하여 반복하여 함수를 실행시킵니다. 문법 .each( function ) 특정 조건을 만족할 때 반복 작업에서 빠져려면 return false 를 사용합니다. 예제 1 p 요소에 각각 다른 클래스를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> .s1 ...

jQuery / Plugin / jquery.toc / H 태그로 목차 만드는 플러그인

jQuery / Plugin / jquery.toc / H 태그로 목차 만드는 플러그인

jquery.toc jquery.toc는 HTML 문서에 있는 h1, h2 등 h 태그를 이용하여 자동으로 목차를 만들어주는 플러그인입니다. GitHub : https://github.com/ndabas/toc Download : http://ndabas.github.com/toc/assets/jquery.toc.zip 목차 클릭 시 부드럽게 이동하는 효과를 주고 싶다면 다른 플러그인을 사용하세요. 기본 사용법 h 태그가 많은 다음과 같은 HTML 문서를 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { font-family: Consolas, sans-serif; } a { color: blue; } </style> </head> <body> <h1>Lorem</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing ...

jQuery / meta 태그의 값 가져오기

jQuery / meta 태그의 값 가져오기

jQuery로 원하는 meta 태그를 선택하여 값을 가져오는 방법은 다음과 같습니다. $( 'meta' ).attr( 'content' ); meta 태그 중 name이 xxx인 것을 선택하고, content 속성의 값을 가져오라는 뜻입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <meta name="author" content="JB"> <meta property="og:image" content="abc.png"> ...

jQuery / Method / jQuery.inArray()

jQuery / Method / jQuery.inArray()

jQuery.inArray() jQuery.inArray()로 배열에 특정 값이 있는지 알아낼 수 있습니다. 문법 jQuery.inArray( value, array ) value : 검색하고자 하는 값을 입력합니다. array : 배열의 이름을 입력합니다. fromIndex : 선택사항으로 몇 번째 배열 값부터 검색할지를 정합니다. 입력하지 않았을 때의 기본값은 0으로, 첫 번째 배열 값부터 검색합니다. 예를 들어 jQuery.inArray( 'as', jbAry ) 는 jbAry라는 배열에 as라는 값이 있는지 ...

jQuery / Method / .slideDown() - 요소를 아래쪽으로 나타나게 하는 메서드

jQuery / Method / .slideDown() - 요소를 아래쪽으로 나타나게 하는 메서드

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

jQuery / Selector / :selected - select에서 선택된 option를 선택하는 선택자

jQuery / Selector / :selected - select에서 선택된 option를 선택하는 선택자

:selected는 select에서 선택된 option를 선택한다. :selected 대신 :checked를 사용해도 된다. 색을 선택하면 그 값을 div 요소의 배경색으로 만든다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> * { font-family: Consolas, monospace; ...

jQuery / Method / .wrapAll() - 선택한 요소 모두를 새로운 태그로 감싸는 메서드

jQuery / Method / .wrapAll() - 선택한 요소 모두를 새로운 태그로 감싸는 메서드

.wrapAll() .wrapAll()은 선택한 요소 모두를 새로운 태그로 감쌉니다. 문법 .wrapAll( wrappingElement ) 예를 들어 $( 'p' ).wrap( '<div></div>' ); 는 모든 p 요소를 모아서 div 태그로 감쌉니다. 예제 1 .wrap()은 선택한 요소에 각각 적용됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> div { ...