슬라이더 플러그인

jQuery

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

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

기본 사용법

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 / :checked - 체크박스, 라디오 버튼에서 체크한 요소 선택하는 선택자

:checked는 체크박스(checkbox)에서 선택한 요소, 라디오 버튼(radio)에서 선택한 요소, 선택 목록(select)에서 선택한 요소(option)를 선택하는 선택자이다. 예제 1 - 라디오 버튼 색을 선택하면, div 요소의 배경색을 바꾼다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> * { ...

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 / Plugin / AOS / 스크롤하면 애니메이션 효과와 함께 나타나는 요소 만드는 라이브러리

AOS 세로로 긴 웹 페이지가 있습니다. 화면을 벗어나는 경우 스크롤하면 밑에 있는 콘텐츠를 볼 수 있습니다. 그 보여지는 콘텐츠에 애니메이션 효과를 주는 라이브러리가 AOS(Animate on scroll library)입니다. 나타나기, 회전하기, 확대하기 등 다양한 효과를 제공합니다. Fade animations fade, fade-up, fade-down, fade-left, fade-right, fade-up-right, fade-up-left, fade-down-right, fade-down-left Flip animations flip-up, flip-down, flip-left, flip-right Slide animations slide-up, slide-down, slide-left, slide-right Zoom animations zoom-in, ...

jQuery / Method / .prop() - 속성값을 가져오거나 추가하는 메서드

.prop() .prop()는 지정한 선택자를 가진 첫번째 요소의 속성값을 가져오거나 속성값을 추가한다. 주의할 점은 HTML 입장에서의 속성(attribute)이 아닌 JavaScript 입장에서의 속성(property)이라는 것이다. 문법 1 - 속성의 값 가져오기 propertyName 속성의 값을 가져온다. .prop( propertyName ) 문법 2 - 속성 추가하기 propertyName 속성에 value 값을 추가한다. .prop( propertyName, value ) 예제 1 - 속성의 값 가져오기 a 요소의 href 속성값을 .attr()과 ...

jQuery / Method / .fadeOut() - 선택한 요소를 서서히 사라지게 하는 메서드

.fadeOut() .fadeOut()은 선택한 요소를 서서히 사라지게 합니다. 문법 .fadeOut( ) duration duration에는 완전히 사라질 때까지의 시간이 들어갑니다. fast, slow로 정하거나 400 같은 숫자로 정할 수 있습니다. 숫자일 경우 단위는 1000분의 1초이며, fast는 200, slow는 600에 해당합니다. 아무것도 입력하지 않으면 기본값 400으로 설정됩니다. 문자로 시간을 정할 때는 따옴표 안에 ...

jQuery / 체크박스 모두 선택, 모두 선택 해제 만들기

<!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() { $( '.check-all' ).click( function() { ...

jQuery / Method / .animate() - 애니메이션 효과 만드는 메서드

.animate .animate()는 애니메이션 효과를 만듭니다. 문법 .animate( properties ) properties 애니메이션 효과를 줄 속성을 정합니다. 가능한 속성은 다음과 같습니다. backgroundPositionX backgroundPositionY borderBottomWidth borderLeftWidth borderRightWidth borderSpacing borderTopWidth borderWidth bottom fontSize height left letterSpacing lineHeight margin marginBottom marginLeft marginRight marginTop maxHeight maxWidth minHeight minWidth opacity outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop right textIndent top width wordSpacing duration 애니메이션 효과를 완료할 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 애니메이션 효과의 방식을 정합니다. swing과 linear이 가능하며, 기본값은 swing입니다. complete 요소가 사라진 후 ...

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

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

jQuery / Method / jQuery.inArray()

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

jQuery / Selector / :odd - 홀수 인덱스 요소를 선택하는 선택자

:odd은 홀수 인덱스 요소를 선택하는 선택자입니다. 문법 $( ':odd' ) 예를 들어 다음은 홀수 인덱스인 p 요소를 선택한다. 주의할 점은 인덱스가 0부터 시작한다는 것이다. $( 'p:odd' ) 예제 인덱스가 홀수인 li 요소를 선택하고, 글자색을 빨간색으로 바꾼다. <!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> ...

CODING FACTORY

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

기본 사용법

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

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

Related Posts