스크립트/Plugin
[Plugin] bxSlider 설치 및 사용법
커드만
2016. 12. 26. 18:19
위의 사이트로 접속 후 Download 버튼을 눌러 내용을 다운 받으세요~ ^^
1. 설치
1-1. head태그에 연결
1 2 3 4 5 6 7 8 9 10 11 12 | <head> <!-- jQuery 연결(최신버전은 안될 수 있습니다.) --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <!-- bxSlider 연결 --> <link href="/경로/jquery.bxslider.css" rel="stylesheet" /> <script src="/경로/jquery.bxslider.min.js"></script> </head> | cs |
1-2. MarkUp
1 2 3 4 5 6 7 8 | <ul class="bxslider"> <li><img src="/images/pic1.jpg" /></li> <li><img src="/images/pic2.jpg" /></li> <li><img src="/images/pic3.jpg" /></li> <li><img src="/images/pic4.jpg" /></li> </ul> | cs |
1-3. 선언
1 2 3 4 5 | $(document).ready(function(){ $('.bxslider').bxSlider(); }); | cs |
2. option
위에서 설명한 선언 말고도 option을 설정하기 위한 선언방법이 있습니다. 아래를 참고해 주세요.
예)
1 2 3 4 5 6 7 | $('.bxslider').bxSlider({ // 옵션 설정 mode: 'fade', captions: true }); | cs |
3. option guide (원문 : http://bxslider.com/options)
옵션설정을 나름 번역하여 일부 option만 기입합니다.
틀리는 부분이 있을 수 있으나 사용을 바탕으로 나름 번역하였으니 틀리는 부분은 지적 부탁 드립니다.
기타 필요사항은 원문을 참고하시기 바랍니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | /* 슬라이드 타입 설정 */ mode: 'horizontal', // option : 'horizontal', 'vertical', 'fade' /* 슬라이드 타입 설정 */ speed: 500, // option : 정수 /* 슬라이드가 자동으로 전환됩니다. */ auto: false, // option : true / false /* 로드시 자동 표시가 시작됩니다. false이면 "시작"컨트롤을 클릭하면 슬라이드 쇼가 시작됩니다. */ autoStart: true, // option : true / false /* 마우스가 슬라이더 위로 움직이면 자동쇼가 멈춥니다. */ autoHover: false, // option : true / false /* 슬라이드가 전환 시간 */ pause: 4000, // option : 정수 /* true이면 "다음"/ "이전"컨트롤이 추가됩니다. */ controls: true, // option : true / false /* true 이면 하단 pager 버튼이 추가 됩니다. */ pager: true, // option : true / false /* true 인 경우 마지막 슬라이에서 "다음"을 클릭하면 첫 번째 슬라이드로 전환 */ infiniteLoop: true, // option : true / false /* true이면 마지막 슬라이드에서 다음버튼을 숨긴다. 첫번째 슬라이드 일 경우 동일 */ hideControlOnEnd: false, // option : true / false /* 슬라이더 위로 마우스를 가져가면 슬러이더 일시 중지(css 전환을 사용하는 경우 기능이 작동하지 않음.) */ tickerHover: false, // option : true / false /* 슬라이더의 자동 크기 조절을 활성화 또는 비활성와 합니다.(반응형에서 사용) */ responsive: true, // option : true / false /* true 인 경우 슬라이더가 터치 스 와이프 전환을 허용합니다.(반응형에서 사용) */ touchEnabled: true, // option : true / false /* 슬라이드 전환을 실행하려면 터치 스 와이프가 초과해야하는 픽셀의 양입니다. 참고 : touchEnabled : true 인 경우에만 사용됩니다. */ swipeThreshold: 50, // option : 정수 /* true이면 가로 및 세로 슬라이드 애니메이션에 CSS 전환이 사용됩니다 (기본 하드웨어 가속을 사용함). false이면 jQuery animate ()가 사용됩니다. */ useCSS: true, // option : true / false /* 최소 슬라이더 되는 갯수 (maxSlides와 같이 사용) */ minSlides: 1, // option : 정수 /* 최대 슬라이더 되는 갯수 (minSlides와 같이 사용) */ maxSlides: 1, // option : 정수 /* 각 슬라이더의 width값 설정 */ slideWidth: 0, // option : 정수 | cs |