jQuery / Plugin / bxSlider / 슬라이더 플러그인
bxSlider는 jQuery 기반의 슬라이더 플러그인입니다.
- 홈페이지 : https://bxslider.com/
- GitHub : https://github.com/stevenwanderski/bxslider-4
홈페이지의 예제는 단순하지만, 옵션을 이용하여 다양한 활용이 가능합니다.
기본 사용법
- jQuery, jquery.bxslider.min.js, jquery.bxslider.css를 연결합니다.
- 다음은 CDN을 이용하여 연결하는 코드입니다.
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script src="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script> <link rel="stylesheet" href="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
- 다음과 같은 형식으로 마크업합니다.
- 클래스 값인 slider는 변경해도 됩니다.
<div class="slider"> <div><img src="images/slider-01.jpg" alt=""></div> <div><img src="images/slider-02.jpg" alt=""></div> <div><img src="images/slider-03.jpg" alt=""></div> <div><img src="images/slider-04.jpg" alt=""></div> <div><img src="images/slider-05.jpg" alt=""></div> </div>
- 위에서 정한 클래스 값을 선택자로 하여 슬라이더를 실행합니다.
<script>
$( document ).ready( function() {
$( '.slider' ).bxSlider();
} );
</script>
- 전체 코드는 다음과 같습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>bxSlider</title>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script>
$( document ).ready( function() {
$( '.slider' ).bxSlider();
} );
</script>
</head>
<body>
<div class="slider">
<div><img src="images/slider-01.jpg" alt=""></div>
<div><img src="images/slider-02.jpg" alt=""></div>
<div><img src="images/slider-03.jpg" alt=""></div>
<div><img src="images/slider-04.jpg" alt=""></div>
<div><img src="images/slider-05.jpg" alt=""></div>
</div>
</body>
</html>
- 실행 결과는 다음과 같습니다.
- 이미지 좌우의 화살표, 이미지 하단의 동그라미를 클릭하면...
- 이미지가 바뀝니다.
옵션 사용법
- 사용할 수 있는 옵션은 https://bxslider.com/options/에 설명되어 있습니다.
- 옵션은 다음과 같은 형식으로 넣습니다.
<script>
$( document ).ready( function() {
$( '.slider' ).bxSlider( {
optionName1: value1,
optionName2: value2,
} );
} );
</script>
- 아래는 1초 마다 자동으로 이미지가 바뀌도록 한 것입니다.
<script>
$( document ).ready( function() {
$( '.slider' ).bxSlider( {
auto: true,
pause: 1000,
} );
} );
</script>
여러 슬라이드 동시에 보이기
아래는 세 개의 슬라이드가 한 번에 보이는 슬라이더입니다.
- auto: true
슬라이더 전환이 자동으로 시작 - pause: 1000
- 1초 마다 슬라이더 전환
- autoHover: true
마우스 올렸을 때 전환 멈춤 - minSlides: 3
최소 슬라이더 수 - maxSlides: 3
최대 슬라이더 수 - slideWidth: 800
이미지 가로 크기 800px, minSliders가 설정되어 있으면 그 수만큼 나오도록 가로폭 조정 - slideMargin: 5
슬라이더 가로 간격 5px
<script>
$( document ).ready( function() {
$( '.slider' ).bxSlider( {
auto: true,
pause: 1000,
autoHover: true,
minSlides: 3,
maxSlides: 3,
slideWidth: 800,
slideMargin: 5,
} );
} );
</script>
캡션 넣기
- captions: true
이미지의 title 속성의 값이 캡션으로 출력됩니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>bxSlider</title>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script>
$( document ).ready( function() {
$( '.slider' ).bxSlider( {
auto: true,
pause: 1000,
autoHover: true,
minSlides: 3,
maxSlides: 3,
slideWidth: 800,
slideMargin: 5,
captions: true,
} );
} );
</script>
</head>
<body>
<div class="slider">
<div><img src="images/slider-01.jpg" alt="" title="Slider 01"></div>
<div><img src="images/slider-02.jpg" alt="" title="Slider 02"></div>
<div><img src="images/slider-03.jpg" alt="" title="Slider 03"></div>
<div><img src="images/slider-04.jpg" alt="" title="Slider 04"></div>
<div><img src="images/slider-05.jpg" alt="" title="Slider 05"></div>
</div>
</body>
</html>
텍스트 슬라이더
이미지 외에 다른 것도 슬라이드로 넣을 수 있습니다. 아래는 텍스트로 만든 슬라이더 예제입니다.
- controls: false
좌우 화살표를 출력하지 않습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>bxSlider</title>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script>
$( document ).ready( function() {
$( '.slider' ).bxSlider( {
auto: true,
pause: 1000,
autoHover: true,
minSlides: 3,
maxSlides: 3,
slideWidth: 800,
slideMargin: 5,
controls: false,
} );
} );
</script>
<style>
.slider div {
border: 5px solid #dadada;
background-color: #fafafa;
padding: 100px 0px;
text-align: center;
font-family: Consolas;
font-size: 30px;
}
</style>
</head>
<body>
<div class="slider">
<div>Text Slider 01</div>
<div>Text Slider 02</div>
<div>Text Slider 03</div>
<div>Text Slider 04</div>
<div>Text Slider 05</div>
<div>Text Slider 06</div>
</div>
</body>
</html>
jQuery / Method / .toggleClass() - 선택한 요소에 클래스 값을 넣었다 뺐다 하는 메서드
.toggleClass() .toggleClass()로 선택한 요소에 클래스(Class) 값을 넣었다 뺐다 할 수 있습니다. 문법 .toggleClass( className ) 예를 들어 $( 'p' ).toggleClass( 'xyz' ); 는, p 요소에 xyz 클래스가 없으면 추가하고, 있으면 제거합니다. 예제 버튼을 클릭하면 h1 요소에 ab 클래스 값이 추가되어 배경색이 생기고, 다시 버튼을 클릭하면 ab 클래스 값이 제거되어 배경색이 사라집니다. <!doctype html> <html lang="ko"> <head> ...
jQuery / Method / .resize() - 윈도우 크기 변할 때 어떤 작업하기
.resize() .resize()는 윈도우 크기가 바뀔 때 어떤 작업을 할 수 있게 합니다. 문법 $( window ).resize( function() { // do somthing } ); 예제 웹브라우저의 크기를 변경할 때, p 요소의 가로폭을 출력합니다. 윈도우 크기를 변경하면 숫자가 바뀝니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...
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 / Method / jQuery.inArray()
jQuery.inArray() jQuery.inArray()로 배열에 특정 값이 있는지 알아낼 수 있습니다. 문법 jQuery.inArray( value, array ) value : 검색하고자 하는 값을 입력합니다. array : 배열의 이름을 입력합니다. fromIndex : 선택사항으로 몇 번째 배열 값부터 검색할지를 정합니다. 입력하지 않았을 때의 기본값은 0으로, 첫 번째 배열 값부터 검색합니다. 예를 들어 jQuery.inArray( 'as', jbAry ) 는 jbAry라는 배열에 as라는 값이 있는지 ...
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 / .fadeIn() - 선택한 요소를 서서히 나타나게 하는 메서드
.fadeIn() .fadeIn()은 선택한 요소를 서서히 나타나게 합니다. 문법 .fadeIn( ) duration duration에는 완전히 나타날 때까지의 시간이 들어갑니다. fast, slow로 정하거나 400 같은 숫자로 정할 수 있습니다. 숫자일 경우 단위는 1000분의 1초이며, fast는 200, slow는 600에 해당합니다. 아무것도 입력하지 않으면 기본값 400으로 설정됩니다. 문자로 시간을 정할 때는 따옴표 안에 ...
jQuery / Method / .addClass() - 클래스 값을 추가하는 메서드
.addClass() .addClass()로 선택한 요소에 클래스 값을 추가할 수 있습니다. 문법 .addClass( className ) 클래스 값은 큰 따옴표 또는 작은 따옴표로 감쌉니다. $( 'h1' ).addClass( 'abc' ); 띄어쓰기로 구분하여 여러 개의 값을 추가할 수 있습니다. $( 'h1' ).addClass( 'ab cd ef' ); 페이지가 로드된 상태에서 클래스 값이 추가되는 것이므로, 추가되기 전의 모양에서 추가된 후의 모양으로 변하는 것을 방문자가 볼 ...
jQuery / Selector / :even - 짝수 인덱스 요소를 선택하는 선택자
:even은 짝수 인덱스 요소를 선택하는 선택자이다. 문법 $( ':even' ) 예를 들어 다음은 짝수 인덱스 문단을 선택한다. 주의할 점은 첫번째 요소 인덱스가 0부터 시작한다는 것이다. $( 'p:even' ) 예제 짝수 인덱스의 li 요소를 선택하여 색을 빨간색으로 만든다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> ...
jQuery / Method / .fadeToggle() - 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 하는 메서드
.fadeToggle() .fadeToggle()은 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 합니다. 문법 .fadeToggle( ) duration duration에는 사라지거나 나타나는데 걸리는 시간을 넣습니다. fast, slow로 정하거나 1000분의 1초 단위의 숫자로 정합니다. fast는 200, slow는 600에 해당하고 기본값은 400입니다. 문자로 시간을 정할 때는 따옴표 안에 문자를 넣습니다. .fadeToggle( 'fast' ) 숫자로 시간을 정할 ...
jQuery / Method / .before() - 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드
.before()는 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킨다. 문법 .before( content ) 다음은 h1 요소 앞에 Hello를 내용으로 갖는 p 요소를 추가한다. $( 'h1' ).before( '<p>Hello</p>' ); 다음은 클래스 값으로 a를 갖는 h1 요소 앞에 클래스 값으로 b를 갖는 p 요소를 이동시킨다. $( 'h1.a' ).before( $( 'p.b' ) ); 예제 ...