bxSlider 플러그인

자주쓰는 슬라이더 플러그인

bxslider.com 접속 후 

다운로드 받고

위 예제를 보면서 쉽게 수정가능하다.

여러 옵션 변경도 가능한데 Options에 들어가면 확인 할 수 있다.

---

bxSlider TIP

bxSlider.css 직접 수정하지 말고

style.css 또는 사용중인 css에서 수정해준다!

또한 보이지 않는 class(ex. bx_wrapper)를 수정하려면

ul.bxslider의 부모 div 생성해 덮어서 수정하면 된다.

---

17-02-06 추가

* 마크업

ul-li말고 다른 마크업, 예를 들어 div-p를 사용해도됨.

*bxslider 스크립트

$(document).ready(function(){

$('.slideclassname').bxSlider();// 클래스 임의지정가능

});

* 옵션

1. 슬라이드 효과

mode: 'fade'

- mode: 'horizontal', 'vertical', 'fade' - 슬라이드 효과

2. 속도

speed:500,

pause:500

- speed : 슬라이드 넘어가는 속도

- pause : 멈추는 시간

- 1초 : 1000

3. 슬라이드에 캡션 설정.

<ul class="bxslider">

<li><img src="/images/root.jpg" title="root"></li>

</ul>

captions:true

- captions : true/false 설명글 추가

4. play/stop/auto 버튼

auto:true,

autoControls:true

- auto : true/false 자동슬라이드

- autoControls : play/stop/pause 슬라이드 컨트롤 버튼

5. 처음과 끝이 있는 슬라이드

infiniteLoop:false,

hideControlOnEnd:true

- infiniteLoop : true/false 무한루프 설정.

- hideControlOnEnd : true/false 이동 방향에 슬라이드 없을때 화살표 숨기기

6. 이미지 높이 자동 조절

adaptiveHeight:true

- adaptiveHeight : true/false 이미지 높이에 맞추어 자동으로 조절.

7. 한 슬라이드에 보여질 이미지수 지정하기

minSlides:2,

maxSlides:2,

slideWidth:360,

slideMargin:10

- minSlides : 0 최소로 보여질 이미지 갯수

- maxSlides : 0 최대로 보여질 이미지 갯수

- slideWidth : 100 이미지 가로 길이

- slideMargin : 10 이미지 사이 여백

- minSlides와 maxSlides가 같을 경우 slideWidth에 상관없이 정해진 수 대로 이동 되지만,

minSlides와 maxSlides가 다를 경우 전체 크기에 맞추어 slideWidth대로 최소부터 최대로 최적화되어 표현됨.

8. 페이지를 썸네일로 변경

<div id="bx-pager">

<a data-slide-index="0" href=""><img src="/images/thumbs/root.jpg"/></a>

<a data-slide-index="1" href=""><img src="/images/thumbs/root.jpg"/></a>

<a data-slide-index="2" href=""><img src="/images/thumbs/root.jpg"/></a>

</div>

pagerCustom : '#bx-pager'

- pagerCustom : '#썸네일아이디'

9. 자동으로 흘러가는 슬라이드

ticker : true,

speed : 65000

- ticker : true/false 티켓모드 사용여부

- speed : 5000 슬라이드 속도

---

https://github.com/demun/FrontEndStudy/blob/master/document/Jquery/docs/01_01_jquery_plugin_bxslider.md