Bx슬라이더는 무료슬라이더중 정말로 자주사용하는 슬라이더중 하나입니다.
옵션도 풍부하여 커스터마이징을 하여 사용하면 정말 많은 작업들을 할수 있습니다.
그런데 문제는 Bx슬라이드 홈페이지가 언제 리뉴얼이 될지 모르고,
리뉴얼시 기존에 테스트문서라든지, api 문서가 남아 있을지 알수가 없습니다.
얼마전 bxslider 홈페이지가 리뉴얼이 되면서 기존 예제들이 전부 사라졌죠....
아래 문서도 사라지기 전에 따로 기록을 해두는것이 좋을꺼 같아서 기록을 해둡니다.
General
Name | Default | Description |
---|---|---|
mode
|
'horizontal' | Type of transition between slides |
speed
|
500 | Slide transition duration (in ms) |
slideMargin
|
0 | Margin between each slide |
startSlide
|
0 | Starting slide index (zero-based) |
randomStart
|
false | Start slider on a random slide |
slideSelector
|
'' | Element to use as slides (ex. 'div.slide'). Note: by default, bxSlider will use all immediate children of the slider element |
infiniteLoop
|
true | If true, clicking "Next" while on the last slide will transition to the first slide and vice-versa |
hideControlOnEnd
|
false | If true, "Prev" and "Next" controls will receive a class disabled when slide is the first or the last Note: Only used when infiniteLoop: false |
easing
|
null | The type of "easing" to use during transitions. If using CSS transitions, include a value for the transition-timing-function property. If not using CSS transitions, you may include plugins/jquery.easing.1.3.js for many options. See http://gsgd.co.uk/sandbox/jquery/easing/ for more info. |
captions
|
false | Include image captions. Captions are derived from the image's title attribute |
ticker
|
false | Use slider in ticker mode (similar to a news ticker) |
tickerHover
|
false | Ticker will pause when mouse hovers over slider. Note: this functionality does NOT work if using CSS transitions! |
adaptiveHeight
|
false | Dynamically adjust slider height based on each slide's height |
adaptiveHeightSpeed
|
500 | Slide height transition duration (in ms). Note: only used if adaptiveHeight: true |
video
|
false | If any slides contain video, set this to true. Also, include plugins/jquery.fitvids.js See http://fitvidsjs.com/ for more info |
responsive
|
true | Enable or disable auto resize of the slider. Useful if you need to use fixed width sliders. |
useCSS
|
true | If true, CSS transitions will be used for horizontal and vertical slide animations (this uses native hardware acceleration). If false, jQuery animate() will be used. |
preloadImages
|
'visible' | If 'all', preloads all images before starting the slider. If 'visible', preloads only images in the initially visible slides before starting the slider (tip: use 'visible' if all slides are identical dimensions) |
touchEnabled
|
true | If true, slider will allow touch swipe transitions |
swipeThreshold
|
50 | Amount of pixels a touch swipe needs to exceed in order to execute a slide transition. Note: only used if touchEnabled: true |
oneToOneTouch
|
true | If true, non-fade slides follow the finger as it swipes |
preventDefaultSwipeX
|
true | If true, touch screen will not move along the x-axis as the finger swipes |
preventDefaultSwipeY
|
false | If true, touch screen will not move along the y-axis as the finger swipes |
wrapperClass
|
'bx-wrapper' | Class to wrap the slider in. Change to prevent from using default bxSlider styles. |
Pager
Name | Default | Description |
---|---|---|
pager
|
true | If true, a pager will be added |
pagerType
|
'full' | If 'full', a pager link will be generated for each slide. If 'short', a x / y pager will be used (ex. 1 / 5) |
pagerShortSeparator
|
' / ' | If pagerType: 'short', pager will use this value as the separating character |
pagerSelector
|
'' | Element used to populate the populate the pager. By default, the pager is appended to the bx-viewport |
pagerCustom
|
null | Parent element to be used as the pager. Parent element must contain a element for each slide. See example here. Not for use with dynamic carousels. |
buildPager
|
null | If supplied, function is called on every slide element, and the returned value is used as the pager item markup. See examples for detailed implementation |
Controls
Name | Default | Description |
---|---|---|
controls
|
true | If true, "Next" / "Prev" controls will be added |
nextText
|
'Next' | Text to be used for the "Next" control |
prevText
|
'Prev' | Text to be used for the "Prev" control |
nextSelector
|
null | Element used to populate the "Next" control |
prevSelector
|
null | Element used to populate the "Prev" control |
autoControls
|
false | If true, "Start" / "Stop" controls will be added |
startText
|
'Start' | Text to be used for the "Start" control |
stopText
|
'Stop' | Text to be used for the "Stop" control |
autoControlsCombine
|
false | When slideshow is playing only "Stop" control is displayed and vice-versa |
autoControlsSelector
|
null | Element used to populate the auto controls |
keyboardEnabled
|
false | Enable keyboard navigation for visible sliders |
Auto
Name | Default | Description |
---|---|---|
auto
|
false | Slides will automatically transition |
stopAutoOnClick
|
false | Auto will stop on interaction with controls |
pause
|
4000 | The amount of time (in ms) between each auto transition |
autoStart
|
true | Auto show starts playing on load. If false, slideshow will start when the "Start" control is clicked |
autoDirection
|
'next' | The direction of auto show slide transitions |
autoHover
|
false | Auto show will pause when mouse hovers over slider |
autoDelay
|
0 | Time (in ms) auto show should wait before starting |
Carousel
Name | Default | Description |
---|---|---|
minSlides
|
1 | The minimum number of slides to be shown. Slides will be sized down if carousel becomes smaller than the original size. |
maxSlides
|
1 | The maximum number of slides to be shown. Slides will be sized up if carousel becomes larger than the original size. |
moveSlides
|
0 | The number of slides to move on transition. This value must be >= minSlides, and <= maxSlides. If zero (default), the number of fully-visible slides will be used. |
slideWidth
|
0 | The width of each slide. This setting is required for all horizontal carousels! |
shrinkItems
|
false | The Carousel will only show whole items and shrink the images to fit the viewport based on maxSlides / minSlides. |
Keyboard
Name | Default | Description |
---|---|---|
keyboardEnabled
|
false | Allows for keyboard control of visible slider. Keypress ignored if slider not visible. |
Accessibility
Name | Default | Description |
---|---|---|
ariaLive
|
true | Adds Aria Live attribute to slider. |
ariaHidden
|
true | Adds Aria Hidden attribute to any nonvisible slides. |
Callbacks
Name | Arguments | Description |
---|---|---|
onSliderLoad
|
currentIndex:
element index of the current slide
|
Executes immediately after the slider is fully loaded |
onSliderResize
|
currentIndex:
element index of the current slide
|
Executes immediately after the slider is resized |
onSlideBefore
|
$slideElement:
jQuery element of the destination element
oldIndex:
element index of the previous slide (before the transition)
newIndex:
element index of the destination slide (after the transition)
|
Executes immediately before each slide transition. |
onSlideAfter
|
$slideElement:
jQuery element of the destination element
oldIndex:
element index of the previous slide (before the transition)
newIndex:
element index of the destination slide (after the transition)
|
Executes immediately after each slide transition. Function argument is the current slide element (when transition completes). |
onSlideNext
|
$slideElement:
jQuery element of the destination element
oldIndex:
element index of the previous slide (before the transition)
newIndex:
element index of the destination slide (after the transition)
|
Executes immediately before each "Next" slide transition. Function argument is the target (next) slide element. |
onSlidePrev
|
$slideElement:
jQuery element of the destination element
oldIndex:
element index of the previous slide (before the transition)
newIndex:
element index of the destination slide (after the transition)
|
Executes immediately before each "Prev" slide transition. Function argument is the target (prev) slide element. |
Bx슬라이더 홈페이지는 https://bxslider.com 가면 볼수 있으나...
언제나 저 홈페이지가 유지가 될꺼라는 보장이 없어서...
따로 기록을 해두니... 많은 도움이 되시길 바랍니다.
'웹관련 > Jquery plugin' 카테고리의 다른 글
[Jquery] 원형 그래프 플러그인 (0) | 2019.02.22 |
---|---|
[Jquery UI] jquery datapicker 한글화 (0) | 2018.11.08 |
[Jquery] Bx슬라이더 좌우 버튼을 클릭후 오토슬라이드가 멈출때 방법 (0) | 2017.09.08 |
[Jquery] Bx Slider display:none 이였다가 display:block 으로 변경시 height 값 0이 되는문제 (1) | 2017.07.19 |
[Jquery] 패럴랙스 (0) | 2016.11.23 |
댓글