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 / Selector / :checked - 체크박스, 라디오 버튼에서 체크한 요소 선택하는 선택자
:checked는 체크박스(checkbox)에서 선택한 요소, 라디오 버튼(radio)에서 선택한 요소, 선택 목록(select)에서 선택한 요소(option)를 선택하는 선택자이다. 예제 1 - 라디오 버튼 색을 선택하면, div 요소의 배경색을 바꾼다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> * { ...
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> ...
jQuery / Method / .fadeIn() - 선택한 요소를 서서히 나타나게 하는 메서드
.fadeIn() .fadeIn()은 선택한 요소를 서서히 나타나게 합니다. 문법 .fadeIn( ) duration duration에는 완전히 나타날 때까지의 시간이 들어갑니다. fast, slow로 정하거나 400 같은 숫자로 정할 수 있습니다. 숫자일 경우 단위는 1000분의 1초이며, fast는 200, slow는 600에 해당합니다. 아무것도 입력하지 않으면 기본값 400으로 설정됩니다. 문자로 시간을 정할 때는 따옴표 안에 ...
jQuery / Method / .removeClass() - 선택한 요소의 클래스 값을 제거하는 메서드
.removeClass() .removeClass()로 선택한 요소에서 클래스 값을 제거할 수 있습니다. 문법 .removeClass( className ) 클래스 값은 큰 따옴표 또는 작은 따옴표로 감쌉니다. $( 'h1' ).removeClass( 'abc' ); 띄어쓰기로 구분하여 여러 개의 값을 제거할 수 있습니다. $( 'h1' ).removeClass( 'ab cd ef' ); 페이지가 로드된 상태에서 클래스 값이 제거되는 것이므로, 제거되기 전의 모양에서 제거된 후의 모양으로 변하는 것을 방문자가 볼 ...
Slider bxSlider slick Uncategorized Smooth Scroll : 한 페이지에 있는 링크 사이를 부드럽게 이동하게 해주는 플러그인 jQuery Actual : 보이지 않는 요소의 크기를 가져오는 플러그인 vTicker : 아래에서 위로 스크롤되는 티커
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 / .click() - 선택한 요소를 클릭했을 때 특정 작업을 하는 메서드
.click() .click()은 선택한 요소를 클릭했을 때 특정 작업을 수행할 수 있게 하는 속성입니다. 문법 .click( handler ) 예를 들어 button 요소를 클릭했을 때 함수를 실행시키고 싶으면 다음과 같이 합니다. $( 'button' ).click( function() { // function } ); 예제 문단을 클릭하면 테두리가 생깁니다. 다시 클릭하면 테두리가 사라집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
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 / Selector / :button - type이 button인 요소를 선택하는 선택자
:button은 type이 button인 요소를 선택하는 선택자이다. 문법 type이 button인 모든 요소를 선택한다. $( ':button' ) type이 button이면서 class 값으로 xy를 갖는 요소를 선택한다. $( '.xy:button' ) 예제 type이 button인 요소의 글자 모양을 기울임꼴로 만들고, 클래스 값이 ab면서 type이 button인 요소의 글자 색은 빨간색으로 만든다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> ...
jQuery / jQuery.noConflict() / 다른 라이브러리, 다른 버전의 jQuery와 충돌 방지하기
jQuery를 사용할 때 다른 라이브러리와 충돌이 나는 경우가 있습니다. 충돌의 원인은 두 가지로 구분할 수 있습니다. 다른 라이브러리와 충돌 다른 버전의 jQuery와 충돌 각 경우에 대해서 어떻게 충돌을 방지할 수 있는지 알아보겠습니다. 다른 라이브러리와 충돌 jQuery는 $를 jQuery의 alias로 사용합니다. 그런데 다른 라이브러리에서 $를 함수나 변수로 사용한다면 jQuery가 제대로 작동하지 않을 수 있습니다. 이를 방지하는 방법은 ...