많이 사용되는 bxSlider의 옵션들
페이지 정보
작성자 서방님 댓글 0건 조회 2,595회 작성일 17-08-08 11:41본문
항상 홈페이지를 만들다 보면 배너 슬라이더를 많이 하게 되는데
이것 저것 써봐도 bxSlider 만한게 없는데
자세한 옵션 설명되어 있는 참조페이지가 있어서
적어봅니다.
★★★ : 작업하다가 샘플로 안될때 => bxSlider.css 파일에 의해 안될 수 있으니깐, jquery와 bxSlider.js파일만 사용하기를...^^
출처 : http://wooreeweb.com/lecture/archives/140
var 변수 = $( '선택자' ).bxSlider( {
옵션 설정
} );
bxSlider 옵션 mode ‘horizontal’ ‘horizontal’‘vertical’‘fade’ 슬라이드 이동 방향 설정 speed 500 숫자 슬라이드 전환 속도 pager true 논리 동그라미(불릿) 버튼 노출 여부 moveSlides 0 숫자 슬라이드 이동시 개수 slideWidth 0 숫자 슬라이드 너비 slideMargin 0 숫자 슬라이드 사이 여백 maxSlides 1 숫자 슬라이드 최대 노출 개수 minSlides 1 숫자 슬라이드 최소 노출 개수 auto false 논리 자동 슬라이드 여부 autoHover false 논리 슬라이드에 마우스 호버시 애니메이션 정지 여부 controls false 논리 이전/다음 버튼 노출 여부 슬라이드 제어 메소드 종류 구분 기능 변수.goToSlide(숫자) 지정한 [숫자] 슬라이드로 이동 변수.goToNextSlide() 다음 슬라이드로 이동 변수.goToPrevSlide() 이전 슬라이드로 이동 변수.startAuto() 자동으로 슬라이드 전환 변수.stopAuto() 자동 슬라이드 전환 기능 정지
<SCRIPT src="js/jquery.bxslider.min.js"></SCRIPT>
<SCRIPT>
$( function () {
var mySlider = $( '#slide_banner' ).bxSlider( {
mode: 'horizontal',// 가로 방향 수평 슬라이드
speed: 500, // 이동 속도를 설정
pager: false, // 현재 위치 페이징 표시 여부 설정
moveSlides: 1, // 슬라이드 이동시 개수
slideWidth: 100, // 슬라이드 너비
minSlides: 4, // 최소 노출 개수
maxSlides: 4, // 최대 노출 개수
slideMargin: 5, // 슬라이드간의 간격
auto: true, // 자동 실행 여부
autoHover: true, // 마우스 호버시 정지 여부
controls: false // 이전 다음 버튼 노출 여부
} );
//이전 버튼을 클릭하면 이전 슬라이드로 전환
$( '#prevBtn' ).on( 'click', function () {
mySlider.goToPrevSlide(); //이전 슬라이드 배너로 이동
return false; //<a>에 링크 차단
} );
//다음 버튼을 클릭하면 다음 슬라이드로 전환
$( '#nextBtn' ).on( 'click', function () {
mySlider.goToNextSlide(); //다음 슬라이드 배너로 이동
return false;
} );
// 다른 예제...
slider = $('.bxslider').bxSlider({
nextSelector: '.next-slide',
nextText: '>',
prevSelector: '.prev-slide',
prevText: '<',
mode: 'fade',
captions: false,
auto: true,
autoControls: false,
onSlideAfter: function(){
$('.slide-number').text((slider.getCurrentSlide()+1)+'/'+slider.getSlideCount());
}
});
} );
</SCRIPT>
<STYLE>
* { margin: 0; padding: 0; }
#banner_wrap { position: relative; width: 500px; margin: 0 auto; }
#prevBtn { position: absolute; left: 0; top: 10px; }
#nextBtn { position: absolute; right: 0; top: 10px; }
</STYLE>
<DIV id=banner_wrap>
<UL id=slide_banner>
<LI>
<A href="http://godlvkhj.tistory.com/admin/entry/post/?id=60&returnURL=CLOSEME#">
<IMG alt="" src="http://godlvkhj.tistory.com/100/75/nature">
</A>
<LI>
<A href="http://godlvkhj.tistory.com/admin/entry/post/?id=60&returnURL=CLOSEME#">
<IMG alt="" src="http://godlvkhj.tistory.com/100/75/sports">
</A>
<LI>
<A href="http://godlvkhj.tistory.com/admin/entry/post/?id=60&returnURL=CLOSEME#">
<IMG alt="" src="http://godlvkhj.tistory.com/100/75/transport">
</A>
<LI>
<A href="http://godlvkhj.tistory.com/admin/entry/post/?id=60&returnURL=CLOSEME#">
<IMG alt="" src="http://godlvkhj.tistory.com/100/75/nightlife">
</A>
<LI>
<A href="http://godlvkhj.tistory.com/admin/entry/post/?id=60&returnURL=CLOSEME#">
<IMG alt="" src="http://godlvkhj.tistory.com/100/75/abstract">
</A>
</LI></UL>
</DIV>
=================================================
bxslider는 jQuery초보자들도 쉽게 사용할 수 있는 슬라이드입니다. callback함수를 쓰려면 조금 어려운 부분이 있을수는 있지만, 기본 사용법은 그리 어렵지 않습니다.
bxSlider 기본 사용법
1. bxSlider 다운로드
위 링크로 들어가시면 우측 상단에 DOWNLOAD 버튼이 보이실 겁니다. 다운받고, 압축을 풀어 보시면 여러 파일들이 있는데요, 저희가 사용할 파일은 jquery.bxslider.css CSS파일과 jquery.bxslider.min.js 자바스크립트 압축형태의 파일 두가지, 그리고 images 폴더 전체입니다. 나머지 파일들은 필요없습니다.
서버에 파일을 업로드하실 때 images 폴더도 통째로 같이 업로드 해주셔야 합니다. 슬라이드 로딩이미지와 좌우 슬라이드 버튼 이미지가 포함되어 있습니다. images 폴더 경로가 달라도 안됩니다. 반드시 같은 폴더에 넣어주세요.
2. 파일 링크 걸기
서버에 파일을 업로드까지 하셨다면 이제 bxslider를 사용하기 위해 파일 링크를 걸어야 합니다. 그리고 bxslider는 jQuery기반이기 때문에 jQuery도 링크를 걸어줘야 합니다. CDN방식이든 파일링크든 걸어주시면 됩니다.
1 2 3 | <script src="/js/jquery-1.11.3.min.js"></script><script src="/plugin/bxslider/jquery.bxslider.min.js"></script><link href="/plugin/bxslider/jquery.bxslider.css" rel="stylesheet"> |
위와 같은 형태로 파일 링크를 걸어주세요.
3. HTML 작성
슬라이드할 이미지들을 html태그로 아래와 같이 작성합니다. class="bxslider" 이게 포인트입니다. bxslider를 호출할 때 저 선택자로 호출할 겁니다.
1 2 3 4 5 6 | <ul class="bxslider"> <li><img src="/img/slide_01.jpg"></li> <li><img src="/img/slide_02.jpg"></li> <li><img src="/img/slide_03.jpg"></li> <li><img src="/img/slide_04.jpg"></li></ul> |
4. bxSlider 호출
ul태그에 지정된 bxslider 클래스로 선택자를 지정하여 bxslider를 호출합니다.
1 2 3 | $(document).ready(function() { $(".bxslider").bxSlider();}); |
끝입니다. 간단하죠? 여기서 자주 사용하는 확장기능을 추가로 알아보도록 하겠습니다.
bxSlider Thumbnail pager (썸네일 사용)
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 | <ul class="bxslider"> <li><img src="/img/slide_01.jpg"></li> <li><img src="/img/slide_02.jpg"></li> <li><img src="/img/slide_03.jpg"></li> <li><img src="/img/slide_04.jpg"></li></ul><div id="bx-pager"> <a data-slide-index="0" href=""><img src="/img/slide_01.jpg" style="width: 70px;"></a> <a data-slide-index="1" href=""><img src="/img/slide_02.jpg" style="width: 70px;"></a> <a data-slide-index="2" href=""><img src="/img/slide_03.jpg" style="width: 70px;"></a> <a data-slide-index="3" href=""><img src="/img/slide_04.jpg" style="width: 70px;"></a></div> |
JS
1 2 3 4 5 | $(document).ready(function() { $(".bxslider").bxSlider({ pagerCustom: '#bx-pager' });}); |
bxslider에서는 다양한 옵션을 제공합니다. 그 중 하나인 pagerCustom을 이용해 페이저를 썸네일로 커스텀하는 겁니다. pagerCustom을 bx-pager로 지정하여 html 마크업에 작성된 썸네일 페이저가 작동하는 원리입니다. a 태그에 있는 data-slide-index는 슬라이드의 인덱스를 가리키는데 0번부터 시작합니다. 위와 같이 소스를 작성하면 슬라이드 아래에 썸네일 페이저가 생성되고, 각각의 썸네일을 클릭하면 해당 슬라이드 이미지로 슬라이드됩니다. 간단하죠?
bxslider는 이처럼 여러가지 옵션들을 적용할 수 있고, 콜백함수도 사용할 수 있습니다. 옵션 사용에 대해서는 크게 어려운 것이 없는데 콜백함수는 초보자들이 사용하기에는 조금 어려운 부분이 있을 수도 있습니다.
댓글목록
등록된 댓글이 없습니다.
