bxslider 사용법 및 옵션 모음

https://bxslider.com/

 

 

js, css 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

html

// Slider HTML (change this to your own!)
<ul class="slider">
  <li>I am a slide.</li>
  <li>I am another slide.</li>
</ul>

bxSlider 호출 및 옵션

<script>
  //기본 호출
  $(document).ready(function(){
    $('.slider').bxSlider();
  });
</script>

$(document).ready(function(){
    $('.bxslider').bxSlider( {
        mode: 'horizontal',// 가로 방향 수평 슬라이드
        speed: 500,        // 이동 속도를 설정
        pager: false,      // 현재 위치 페이징 표시 여부 설정
        moveSlides: 1,     // 슬라이드 이동시 개수
        slideWidth: 100,   // 슬라이드 너비
        minSlides: 4,      // 최소 노출 개수
        maxSlides: 4,      // 최대 노출 개수
        slideMargin: 5,    // 슬라이드간의 간격
        auto: true,        // 자동 실행 여부
        autoHover: true,   // 마우스 호버시 정지 여부
        controls: false    // 이전 다음 버튼 노출 여부
    });
});

 

---

옵션

• General

Name	Default	Description
mode 'horizontal', 'vertical', 'fade'	'horizontal'	슬라이드 전환 유형
speed integer	500	슬라이드 전환 시간(ms단위)
slideMargin integer	0	슬라이드 사이 여백
startSlide integer	0	슬라이드 시작 인덱스 (zero-based)
randomStart boolean	false	임의의 슬라이드에서 슬라이더 시작
slideSelector jQuery selector	' '	슬라이드로 사용할 요소 (ex. 'div.slide') 참고: 기본적으로, bxSlider는 슬라이더 요소의 모든 직계 자식을 사용
infiniteLoop boolean	true	만약 true로 설정하면, 맨 마지막에서 "Next" 를 클릭하면 처음으로 전환
hideControlOnEnd boolean	false	true의 경우 슬라이드가 첫번째 또는 마지막일때 "Prev"과 "Next" 컨트롤을 비활성화하는 클래스(disabled)를 받게됩니다. 참고: infiniteLoop: false 를 사용하는 경우만 적용
easing css 사용할 경우: 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'cubic-bezier(n,n,n,n)'. css사용 안함 : 'swing', 'linear' (see the above file for more options)	null	"easing" 유형은 전환시 사용. CSS 전환을 사용하는 경우, transition-timing-function 속성에 대한 값을 포함한다. CSS 전환을 사용하지 않는 경우 당신은 더많은 옵션 플러그인인 jquery.easing.1.3.js을 포함 할 수 있다. 더 많은 정보 http://gsgd.co.uk/sandbox/jquery/easing/를 참조하십시오.
captions boolean	false	이미지 캡션을 포함합니다. 캡션은 이미지의 title 속성
ticker boolean	false	ticker 모드에서 슬라이더를 사용 (뉴스 ticker와 유사)
tickerHover boolean	false	슬라이더 위로 마우스를 가져가면 ticker가 일시 중지.  참고: CSS 전환을 사용하는 경우 이 기능이 작동하지 않습니다!
adaptiveHeight boolean	false	동적으로 각 슬라이드의 높이를 기반으로 슬라이더 높이를 조정
video boolean	false	모든 슬라이드 비디오를 포함하는 경우, true로 설정합니다. 또한, 플러그인 jquery.fitvids.js포함 더 많은 정보를 원하시면 http://fitvidsjs.com/ 보기
responsive boolean	true	슬라이더의 자동 크기 조정을 활성화하거나 비활성화합니다. 고정 너비 슬라이더를 사용해야 하는 경우에 유용합니다.
useCSS boolean	true	true의 경우, CSS 전환은 수평 및 수직 슬라이드 애니메이션에 사용됨 (네이티브 하드웨어 가속을 사용).  false의 경우, jQuery의 animate()가 사용
preloadImages 'all', 'visible'	'visible'	'all' 이면, 슬라이더를 시작하기 전에 모든 이미지를 미리로드. 'visible' 이면, 슬라이더를 시작하기 전에 처음 볼 슬라이드의 이미지만 미리로드 (tip: 모든 슬라이더의 크기가 동일한경우 'visible' 사용)
touchEnabled boolean	true	true 이면, 슬라이더에 터치 전환을 허용합니다.
swipeThreshold integer	50	슬라이드 전환을 실행하기 위해 터치 스와이프가 초과해야 하는 픽셀의 양입니다. 참고: touchEnabled: true인 경우에만 사용됨
oneToOneTouch boolean	true	true인 경우 페이드되지 않은 슬라이드는 스와이프할 때 손가락을 따릅니다.
preventDefaultSwipeX boolean	true	true인 경우 손가락을 스와이프할 때 터치 스크린이 x축을 따라 이동하지 않습니다.
preventDefaultSwipeY boolean	false	true인 경우 손가락으로 스와이프할 때 터치 스크린이 y축을 따라 이동하지 않습니다.
wrapperClass string	'bx-wrapper'	슬라이더를 래핑할 클래스입니다. 기본 bxSlider 스타일을 사용하지 못하도록 변경합니다.

 

 

• pager

Name	Default	Description
pager boolean	true	true이면, pager가 추가
pagerType 'full', 'short'	'full'	'full'이면, pager 링크는 각 슬라이드에 대해 생성됩니다. 'short'이면, x / y pager가 사용됩니다 (ex. 1 / 5)
pagerShortSeparator string	' / '	pagerType: 'short'이면, pager는 분리 문자로 이 값을 사용
pagerSelector jQuery selector	''	pager 셀렉터로 엘리먼트를 사용합니다. 기본적으로 호출기는 bx-viewport에 추가
pagerCustom jQuery selector	null	부모 요소가 pager로서 이용된다. 부모 요소는 각 슬라이드에 대한 <a data-slide-index="x">를 포함해야합니다. 하지만 동적 carousels과 함께 사용해야합니다.
buildPager function(slideIndex)	null	제공되는 경우, 함수는 모든 슬라이드 요소이며, 반환된 값은 페이저 항목 마크업으로 사용됩니다. 자세한 구현을위한 예제를 참조하십시오.

 

• Controls

Name	Default	Description
controls boolean	true	true이면, "Next" / "Prev" 컨트롤이 추가
nextText string	'Next'	텍스트가 "Next" 제어에 사용
prevText string	'Prev'	텍스트가 "Prev" 제어에 사용
nextSelector jQuery selector	null	"Next" 제어에 사용할 엘리먼트 요소
prevSelector jQuery selector	null	"Prev" 제어에 사용할 엘리먼트 요소
autoControls boolean	false	true이면, "Start" / "Stop" 컨트롤 추가
startText string	'Start'	텍스트가 "Start" 제어에 사용
stopText string	'Stop'	텍스트가 "Stop" 제어에 사용
autoControlsCombine boolean	false	슬라이드 쇼를 재생하면 "Stop" 컨트롤이 표시되고 반대의 경우도 마찬가지 입니다
autoControlsSelector jQuery selector	null	auto(자동실행) 제어에 사용되는 엘리먼트 요소를 선택
keyboardEnabled boolean	false	슬라이더에 대한 키보드 네비게이션을 활성화

반응형

 

• Auto

Name	Default	Description
auto boolean	false	슬라이드가 자동실행으로 전환
stopAutoOnClick boolean	false	자동샐행 중단
pause integer	4000	자동실행 전환 사이의 시간(ms단위)
autoStart boolean	true	로드될때 자동실행이 시작합니다. 만약 false이면, "Start" 컨트롤을 클릭해야 시작
autoDirection 'next', 'prev'	'next'	자동으로 재생되는 슬라이드 전환 방향
autoHover boolean	false	마우스로 슬라이더를 가리킬 때 슬라이드가 일시중지
autoDelay integer	0	자동실행이 시작되기전의 기다리는 시간

 

 

• Carousel

Name	Default	Description
minSlides integer	1	슬라이드의 최소 수를 표시합니다. 캐러셀이 원래 크기보다 작아질 경우 슬라이드 크기가 될 것입니다.
maxSlides integer	1	슬라이드의 최대 수를 표시합니다. 컨베이어가 원래 크기보다 커지면 슬라이드도 자동 키워집니다.
moveSlides integer	0	이숫자의 슬라이드로 이동합니다. 이값으로 해야됩니다 >= minSlides, 그리고 <= maxSlides. 만약 0인경우 (기본값), 슬라이드에 보여진 숫자로 이동됩니다.
slideWidth integer	0	각 슬라이드의 폭입니다. 이 설정은 모든 수평 캐러셀에 필요합니다!
shrinkItems boolean	false	캐러셀은 전체 항목을 표시하고 maxSlides / MinSlides에 기초한 뷰포트에 맞게 이미지를 축소할 것이다.

 

 

 

• Keyboard

Name	Default	Description
keyboardEnabled boolean	false	슬라이드를 키보드로 제어 할 수 있습니다. 슬라이더를 볼 수 없는 경우 키누르기(Keypress)는 무시합니다

 

 

 

• Accessibility

Name	Default	Description
ariaLive boolean	true	슬라이드 속성에 Aria Live를 추가
ariaHidden boolean	true	보이지 않는 슬라이드에 Aria Hidden 속성을 추가

 

 

 

• Callbacks

Name	Arguments	Description
onSliderLoad	currentIndex: 현재 슬라이드 인덱스	슬라이더가 완전히 로드된 직후 실행
onSliderResize	currentIndex: 현재 슬라이드 인덱스	슬라이더의 크기가 변경된 후 즉시 실행
onSlideBefore	$slideElement: 대상 요소의 jQuery 요소 oldIndex: 이전 슬라이드의 요소 인덱스(전환 전) newIndex: 대상 슬라이드의 요소 인덱스(전환 후)	슬라이드 전환 직전에 실행
onSlideAfter	$slideElement: 대상 요소의 jQuery 요소 oldIndex: 이전 슬라이드의 요소 인덱스(전환 전) newIndex: 대상 슬라이드의 요소 인덱스(전환 후)	슬라이드 전환 후 즉시 실행합니다. 함수의 인수는 현재 슬라이드 요소(전환이 완료 될 때)
onSlideNext	$slideElement: 대상 요소의 jQuery 요소 oldIndex: 이전 슬라이드의 요소 인덱스(전환 전) newIndex: 대상 슬라이드의 요소 인덱스(전환 후)	"Next" 슬라이드 전환 직전에 실행합니다. 함수의 인수의 대상은 슬라이드 (next)엘리먼트
onSlidePrev	$slideElement: 대상 요소의 jQuery 요소 oldIndex: 이전 슬라이드의 요소 인덱스(전환 전) newIndex: 대상 슬라이드의 요소 인덱스(전환 후)	"Prev" 슬라이드 전환 직전에 실행합니다. 함수의 인수의 대상은 슬라이드 (prev)엘리먼트

 

 

• Public methods

Name	Example	Description
goToSlide	slider = $('.bxslider').bxSlider(); slider.goToSlide(3);	제공된 슬라이드 인덱스에 슬라이드 전환을 수행합니다 (zero-based)
goToNextSlide	slider = $('.bxslider').bxSlider(); slider.goToNextSlide();	"Next" 슬라이드 전환을 수행
goToPrevSlide	slider = $('.bxslider').bxSlider(); slider.goToPrevSlide();	"Prev" 슬라이드 전환을 수행
startAuto	slider.startAuto();	슬라이드의 자동실행(auto)을 시작합니다. 만약 false이면 업데이트되는 자동 컨트롤을 막습니다.
stopAuto	slider.stopAuto();	슬라이드의 자동실행(auto)을 중지합니다. 만약 false이면 업데이트되는 자동 컨트롤을 막습니다.
getCurrentSlide	var current = slider.getCurrentSlide();	현재 활성화된 슬라이드를 반환합니다.
getSlideCount	var slideQty = slider.getSlideCount();	슬라이드의 총 갯수를 반환합니다.
redrawSlider	slider.redrawSlider();	슬라이드를 다시 그립니다. 슬라이드를 숨김후 다시 표시할때 유용합니다.
reloadSlider	slider.reloadSlider();	슬라이드를 리로드합니다. 실시간으로 슬라이드를 추가할때 유용합니다. 설정의 옵션 객체를 받아들입니다
destroySlider	slider.reloadSlider();	라이더를 파괴(destroy)합니다. 이것은 (슬라이더를 호출하기 전에) 다시 원래 상태로 모든 슬라이더 요소를 되돌립니다.

 

 

 

 

---

참고

https://bxslider.com/

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

GitHub - demun/FrontEndStudy: 프론트엔드 스터디를 위한 저장소

감사드립니다.