Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

web sprit

[Plugin] bxSlider 설치 및 사용법 본문

스크립트/Plugin

[Plugin] bxSlider 설치 및 사용법

커드만 2016. 12. 26. 18:19

http://bxslider.com/

위의 사이트로 접속 후 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


'스크립트 > Plugin' 카테고리의 다른 글

swiper js 버전별 다운로드 방법  (0) 2023.04.01
[Plugin] Owl.carousel.js 반응형 터치 슬라이더  (0) 2017.01.03
Datepicker 플러그인 종류 및 사용방법  (0) 2016.03.30
select 를 꾸며주는 플러그인 (selectric JS)  (2) 2016.03.14
Fotorama 사용방법 및 기능 제어  (0) 2015.09.15
닫기
공유하기 링크
'스크립트/Plugin' Related Articles more
Comments