파인SE v11 - 메뉴얼

BX slider

버튼/페이지 자동위치정렬 필요없을 경우에는 주석처리 및 제거 하세요.

공통스타일

/******************
BXslider
******************/
/* 롤링-기본값 */
.nd-roll-wrap {position:relative;}
.nd-roll-wrap ul.nd-roll-aticle {position:relative;width:100%;height:100%;margin:0;padding:0;}
/* 롤링-페이지 */
.nd-roll-wrap .bx-pager {position:absolute;bottom:20px;z-index:99;}
.nd-roll-wrap .bx-pager > div,
.nd-roll-wrap .bx-pager > div > a {float:left;overflow:hidden;}
.nd-roll-wrap .bx-pager > div > a {width:10px;height:10px;margin:0 2px;background-color:#fff;border-radius:10px;text-indent:-100pt}
.nd-roll-wrap .bx-pager > div > a.active {background-color:#f00;}
/* 롤링-버튼 */
.nd-roll-wrap .bx-controls-direction {position:absolute;width:100%;}
.nd-roll-wrap .bx-controls-direction > a {height:100%;height:40px;background-color:#000;padding:0 10px;color:#fff;line-height:38px;z-index:99;}
.nd-roll-wrap .bx-controls-direction > a.bx-prev {position:absolute;left:0;}
.nd-roll-wrap .bx-controls-direction > a.bx-next {position:absolute;right:0;}
/* 썸네일형 */
.nd-roll-pager > li {position:relative}
.nd-roll-pager > li > a {display:block;padding:0}
.nd-roll-pager > li > a .reponsive-image {font-size:1rem}
.nd-roll-pager > li > a.active .reponsive-image {background-color:#fff;color:#000}

헤드라인

image1
image2
image3
image4
image5

상하 좌우 페이드

코드보기

썸네일

image1
image2
image3
image4
image5

상하 좌우 페이드

코드보기

배너

코드보기

옵션값

// mode
default: 'horizontal'
options: 'horizontal', 'vertical', 'fade'

// speed
default: 500
options: integer

// slideMargin
default: 0
options: integer

// startSlide
default: 0
options: integer

// randomStart
default: false
options: boolean (true / false)

// slideSelector
default: ''
options: jQuery selector

// infiniteLoop
default: true
options: boolean (true / false)

// hideControlOnEnd
default: false
options: boolean (true / false)

// easing
default: null
options: if using CSS: 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'cubic-bezier(n,n,n,n)'. If not using CSS: 'swing', 'linear' (see the above file for more options)

// captions
default: false
options: boolean (true / false)

// ticker
default: false
options: boolean (true / false)

// tickerHover
default: false
options: boolean (true / false)

// adaptiveHeight
default: false
options: boolean (true / false)

// adaptiveHeightSpeed
default: 500
options: integer

// video
default: false
options: boolean (true / false)

// responsive
default: false
options: boolean (true / false)

// useCSS
default: true
options: boolean (true / false)

// preloadImages
default: visible
options: 'all', 'visible'

// touchEnabled
default: true
options: boolean (true / false)

// swipeThreshold
default: 50
options: integer

// oneToOneTouch
default: true
options: boolean (true / false)

// preventDefaultSwipeX
default: true
options: boolean (true / false)

// preventDefaultSwipeY
default: false
options: boolean (true / false)

// Pager
default: true
options: boolean (true / false)

// pagerType
default: 'full'
options: 'full', 'short'

// pagerShortSeparator
default: ' / '
options: string

// pagerSelector
default: ''
options: jQuery selector

// pagerCustom
default: null
options: jQuery selector

// buildPager
default: null
options: function(slideIndex)

// controls
default: true
options: boolean (true / false)

// nextText
default: 'Next'
options: string

// prevText
default: 'Prev'
options: string

// nextSelector
default: null
options: jQuery selector

// prevSelector
default: null
options: jQuery selector

// autoControls
default: false
options: boolean (true / false)

// startText
default: 'Start'
options: string

// stopText
default: 'Stop'
options: string

// autoControlsCombine
default: false
options: boolean (true / false)

// autoControlsSelector
default: null
options: jQuery selector

// auto
default: false
options: boolean (true / false)

// pause
default: 4000
options: integer

// autoStart
default: true
options: boolean (true / false)

// autoDirection
default: 'next'
options: 'next', 'prev'

// autoHover
default: false
options: boolean (true / false)

// autoDelay
default: 0
options: integer

// minSlides
default: 1
options: integer

// maxSlides
default: 1
options: integer

// moveSlides
default: 0
options: integer

// slideWidth
default: 0
options: integer

// Callbacks
default: function(){}
options: function(currentIndex){ // your code here }
arguments:
  currentIndex: element index of the current slide

// onSlideBefore
default: function(){}
options: function($slideElement, oldIndex, newIndex){ // your code here }
arguments:
  $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)

// onSlideAfter
default: function(){}
options: function($slideElement, oldIndex, newIndex){ // your code here }
arguments:
  $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)

// onSlideNext
default: function(){}
options: function($slideElement, oldIndex, newIndex){ // your code here }
arguments:
  $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)

// onSlidePrev
default: function(){}
options: function($slideElement, oldIndex, newIndex){ // your code here }
arguments:
  $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)

// goToSlide
example:
slider = $('.bxslider').bxSlider();
slider.goToSlide(3);

// goToNextSlide
example:
slider = $('.bxslider').bxSlider();
slider.goToNextSlide();

// goToPrevSlide
example:
slider = $('.bxslider').bxSlider();
slider.goToPrevSlide();

// startAuto
example:
slider = $('.bxslider').bxSlider();
slider.startAuto();

// stopAuto
example:
slider = $('.bxslider').bxSlider();
slider.stopAuto();

// getCurrentSlide
example:
slider = $('.bxslider').bxSlider();
var current = slider.getCurrentSlide();

// getSlideCount
example:
slider = $('.bxslider').bxSlider();
var slideQty = slider.getSlideCount();

// reloadSlider
example:
slider = $('.bxslider').bxSlider();
slider.reloadSlider();

// destroySlider
example:
slider = $('.bxslider').bxSlider();
slider.destroySlider();