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 / 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 / Plugin / slick / 슬라이더 플러그인
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> ...
jQuery / Method / .slice() - 일치하는 요소의 일부분만 선택하는 메서드
.slice() .slice()는 일치하는 요소의 일부분만 선택합니다. 문법 .slice( start ) 예를 들어 $( 'li' ).slice( 2 ).css( 'color', 'red' ); 는 li 요소 중 3번째부터 빨간색으로 만듭니다. $( 'li' ).slice( 2, 5 ).css( 'color', 'red' ); 는 li 요소 중 3번째부터 5번째까지 빨간색으로 만듭니다. $( 'li' ).slice( -4, -2 ).css( 'color', 'red' ); 는 li 요소 중 ...
jQuery / Method / .toggleClass() - 선택한 요소에 클래스 값을 넣었다 뺐다 하는 메서드
.toggleClass() .toggleClass()로 선택한 요소에 클래스(Class) 값을 넣었다 뺐다 할 수 있습니다. 문법 .toggleClass( className ) 예를 들어 $( 'p' ).toggleClass( 'xyz' ); 는, p 요소에 xyz 클래스가 없으면 추가하고, 있으면 제거합니다. 예제 버튼을 클릭하면 h1 요소에 ab 클래스 값이 추가되어 배경색이 생기고, 다시 버튼을 클릭하면 ab 클래스 값이 제거되어 배경색이 사라집니다. <!doctype html> <html lang="ko"> <head> ...
jQuery / HTML 문서와 연결하는 방법, 사용하는 방법
HTML 문서와 연결하기 CDN 이용하기 HTML 문서에 다음 코드를 추가합니다. <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> 3.3.1은 버전입니다. 다른 버전을 사용하고 싶다면 숫자를 변경합니다. 다운로드 받아 연결하기 jQuery 다운로드는 여기에서 합니다. 압축된 파일도 있고, 압축되지 않은 파일도 있습니다. 그리고 HTML 문서에 다음 코드를 추가합니다. <script src="path/jquery-3.3.1.min.js"></script> path와 파일 이름은 적절히 변경합니다. jQuery 사용하기 다음은 ID가 jb인 h1 요소의 색을 빨간색으로 바꾸는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta ...
jQuery / Method / .fadeOut() - 선택한 요소를 서서히 사라지게 하는 메서드
.fadeOut() .fadeOut()은 선택한 요소를 서서히 사라지게 합니다. 문법 .fadeOut( ) duration duration에는 완전히 사라질 때까지의 시간이 들어갑니다. fast, slow로 정하거나 400 같은 숫자로 정할 수 있습니다. 숫자일 경우 단위는 1000분의 1초이며, fast는 200, slow는 600에 해당합니다. 아무것도 입력하지 않으면 기본값 400으로 설정됩니다. 문자로 시간을 정할 때는 따옴표 안에 ...
jQuery / Method / .slideToggle() - 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 하는 메서드
.slideToggle() .slideToggle()은 보이지 않는 요소는 아래쪽으로 서서히 나타나게 하고, 보이는 요소는 위쪽으로 서서히 사라지게 합니다. 문법 .slideToggle( ) duration 요소가 나타나거나 사라질 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 나타나거나 사라지는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete 요소가 나타나거나 ...
jQuery / Method / .not() - 선택한 요소 중 특정 선택자를 제외한 요소를 선택하는 메서드
.not() .not()은 선택한 요소 중 특정 선택자를 제외한 요소를 선택합니다. 문법 .not( selector ) 예를 들어 $( 'p' ).not( 'p.abc' ).css( 'color', 'green'); 은 p 요소 중 abc를 클래스 값으로 가지지 않은 것을 선택합니다. 예제 버튼을 클릭하면 클래스 값으로 ip를 갖지 않는 li 요소의 내용을 빨간색으로 바꿉니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
.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 / jQuery.inArray()
jQuery.inArray() jQuery.inArray()로 배열에 특정 값이 있는지 알아낼 수 있습니다. 문법 jQuery.inArray( value, array ) value : 검색하고자 하는 값을 입력합니다. array : 배열의 이름을 입력합니다. fromIndex : 선택사항으로 몇 번째 배열 값부터 검색할지를 정합니다. 입력하지 않았을 때의 기본값은 0으로, 첫 번째 배열 값부터 검색합니다. 예를 들어 jQuery.inArray( 'as', jbAry ) 는 jbAry라는 배열에 as라는 값이 있는지 ...