bxSlider 플러그인 활용하기

* bxSlider 플러그인

- bxSlider 플러그인을 사용하면, 슬라이드 배너나 자동으로 재생되는 슬라이드 배너를 쉽고 간단히 만들 수 있음.

- 기본 메서드 적용 방법 (기본형)

var 참조 변수 = $('요소 선택').bxSlider({    옵션 설정   });

 

- bxSlider 옵션 종류

종류	기본값	데이터 형식	설명
mode	"horizontal"	"horizontal"  "vertical"  "fade"	슬라이드 이동 방향을 설정
speed	500	숫자형 값	슬라이드 전환 시 속도를 설정
pager	true	논리형 값	현재 위치를 알리는 불릿(동그라미 버튼) 노출 여부를 설정
moveSlides	0	숫자형 값	슬라이드 이동 시 개수를 설정
sliderWidth	0	숫자형 값	슬라이드마다 너비를 설정
slideMargin	0	숫자형 값	슬라이드간의 여백을 설정
maxSlides	1	숫자형 값	슬라이드 최대 노출 개수를 설정
minSlides	1	숫자형 값	슬라이드 최소 노출 개수를 설정
auto	false	논리형 값	자동으로 슬라이드를 젆환할지 설정
autoHover	false	논리형 값	슬라이드에 마우스를 올렸을 때 자동 전환을 멈추게 할 것인지 설정
controls	true	논리형 값	이전/다음 버튼의 노출 여부를 설정

 

-> bxSlider()의 기본 메서드에 중괄호({...}) 사이에 작성함.

-> 옵션은 JSON 데이터 형식인 키(key)와 값(value)으로 입력함.

-> 옵션을 어떻게 설정하느냐에 따라 슬라이드 방향과 속도 등이 달라짐.

 

- 슬라이드 제어 메서드 : 배너에 제어 버튼을 만들 때 사용.

예) 이전 버튼 또는 다음 버튼을 만들거나 정지 버튼, 재생 버튼을 만들 때

- 슬라이드 메서드의 종류

종류	설명
참조변수.goToSlide(number)	지정한 슬라이드로 이동함.
참조변수.goToNextSlide()	다음 슬라이드로 이동함.
참조변수.goToPrevSlide()	이전 슬라이드로 이동함.
참조변수.startAuto()	자동으로 슬라이드가 전환됨.
참조변수.stopAuto()	자동으로 슬라이드가 전환되는 것을 정지시킴.

 

- bxSlider 플러그인을 사용하려면, bxSlider 사이트인 http://bxSlider.com으로 이동한 후, bxSlider 플러그인 파일을 다운로드 받음.

 

 

내용 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)