bxSlider

bxSlider

2016. 7. 22. 13:12ㆍ웹랩

요즘 bxSlider 홈페이지를 들어가면 얼마나 느린지... 워낙에 깔끔하게 쓸 수 있으니 많이 알려져서 사용자가 굉장히 많은 것 같다.
그래서 따로 정리 해놓고 보려고 한다... 그런데 한 페이지에 다 넣고 보니 너무 느려짐... ㅠㅠ

설치방법

bxslider를 사용하기 위한 셋팅

HTML 마크업

bxslider 실행

$(document).ready(function(){ $('.bxslider').bxSlider(); });

Options

General Pager Controls Auto Carousel Callbacks Public methods

General

mode

Type of transition between slides

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

speed

Slide transition duration (in ms)

default: 500 options: integer

slideMargin

Margin between each slide

default: 0 options: integer

startSlide

Starting slide index (zero-based)

default: 0 options: integer

randomStart

Start slider on a random slide

default: false options: boolean (true / false)

slideSelector

Element to use as slides (ex. 'div.slide').
Note: by default, bxSlider will use all immediate children of the slider element

default: '' options: jQuery selector

infiniteLoop

If true, clicking "Next" while on the last slide will transition to the first slide and vice-versa

default: true options: boolean (true / false)

hideControlOnEnd

If true, "Next" control will be hidden on last slide and vice-versa
Note: Only used when infiniteLoop: false

default: false options: boolean (true / false)

easing

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.

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

Include image captions. Captions are derived from the image's title attribute

default: false options: boolean (true / false)

ticker

Use slider in ticker mode (similar to a news ticker)

default: false options: boolean (true / false)

tickerHover

Ticker will pause when mouse hovers over slider. Note: this functionality does NOT work if using CSS transitions!

default: false options: boolean (true / false)

adaptiveHeight

Dynamically adjust slider height based on each slide's height

default: false options: boolean (true / false)

adaptiveHeightSpeed

Slide height transition duration (in ms). Note: only used if adaptiveHeight: true

default: 500 options: integer

video

If any slides contain video, set this to true. Also, include plugins/jquery.fitvids.js
See http://fitvidsjs.com/ for more info

default: false options: boolean (true / false)

responsive

Enable or disable auto resize of the slider. Useful if you need to use fixed width sliders.

default: true options: boolean (true / false)

useCSS

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.

default: true options: boolean (true / false)

preloadImages

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)

default: visible options: 'all', 'visible'

touchEnabled

If true, slider will allow touch swipe transitions

default: true options: boolean (true / false)

swipeThreshold

Amount of pixels a touch swipe needs to exceed in order to execute a slide transition. Note: only used if touchEnabled: true

default: 50 options: integer

oneToOneTouch

If true, non-fade slides follow the finger as it swipes

default: true options: boolean (true / false)

preventDefaultSwipeX

If true, touch screen will not move along the x-axis as the finger swipes

default: true options: boolean (true / false)

preventDefaultSwipeY

If true, touch screen will not move along the y-axis as the finger swipes

default: false options: boolean (true / false)

Pager

If true, a pager will be added

default: true options: boolean (true / false)

pagerType

If 'full', a pager link will be generated for each slide. If 'short', a x / y pager will be used (ex. 1 / 5)

default: 'full' options: 'full', 'short'

pagerShortSeparator

If pagerType: 'short', pager will use this value as the separating character

default: ' / ' options: string

pagerSelector

Element used to populate the populate the pager. By default, the pager is appended to the bx-viewport

default: '' options: jQuery selector

pagerCustom

Parent element to be used as the pager. Parent element must contain a <a data-slide-index="x"> element for each slide. See example here. Not for use with dynamic carousels.

default: null options: jQuery selector

buildPager

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

default: null options: function(slideIndex)

Controls

controls

If true, "Next" / "Prev" controls will be added

default: true options: boolean (true / false)

nextText

Text to be used for the "Next" control

default: 'Next' options: string

prevText

Text to be used for the "Prev" control

default: 'Prev' options: string

nextSelector

Element used to populate the "Next" control

default: null options: jQuery selector

prevSelector

Element used to populate the "Prev" control

default: null options: jQuery selector

autoControls

If true, "Start" / "Stop" controls will be added

default: false options: boolean (true / false)

startText

Text to be used for the "Start" control

default: 'Start' options: string

stopText

Text to be used for the "Stop" control

default: 'Stop' options: string

autoControlsCombine

When slideshow is playing only "Stop" control is displayed and vice-versa

default: false options: boolean (true / false)

autoControlsSelector

Element used to populate the auto controls

default: null options: jQuery selector

Auto

auto

Slides will automatically transition

default: false options: boolean (true / false)

pause

The amount of time (in ms) between each auto transition

default: 4000 options: integer

autoStart

Auto show starts playing on load. If false, slideshow will start when the "Start" control is clicked

default: true options: boolean (true / false)

autoDirection

The direction of auto show slide transitions

default: 'next' options: 'next', 'prev'

autoHover

Auto show will pause when mouse hovers over slider

default: false options: boolean (true / false)

autoDelay

Time (in ms) auto show should wait before starting

default: 0 options: integer

Carousel

minSlides

The minimum number of slides to be shown. Slides will be sized down if carousel becomes smaller than the original size.

default: 1 options: integer

maxSlides

The maximum number of slides to be shown. Slides will be sized up if carousel becomes larger than the original size.

default: 1 options: integer

moveSlides

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.

default: 0 options: integer

slideWidth

The width of each slide. This setting is required for all horizontal carousels!

default: 0 options: integer

Callbacks

onSliderLoad

Executes immediately after the slider is fully loaded

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

onSlideBefore

Executes immediately before each slide transition.

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

Executes immediately after each slide transition. Function argument is the current slide element (when transition completes).

onSlideNext

Executes immediately before each "Next" slide transition. Function argument is the target (next) slide element.

onSlidePrev

Executes immediately before each "Prev" slide transition. Function argument is the target (prev) slide element.

Public methods

goToSlide

Performs a slide transition to the supplied slide index (zero-based)

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

goToNextSlide

Performs a "Next" slide transition

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

goToPrevSlide

Performs a "Prev" slide transition

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

startAuto

Starts the auto show. Provide an argument false to prevent the auto controls from being updated.

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

stopAuto

Stops the auto show. Provide an argument false to prevent the auto controls from being updated.

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

getCurrentSlide

Returns the current active slide

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

getSlideCount

Returns the total number of slides in the slider

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

reloadSlider

Reload the slider. Useful when adding slides on the fly. Accepts an optional settings object. See here for an example.

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

destroySlider

Destroy the slider. This reverts all slider elements back to their original state (before calling the slider).

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

예제

예제 바로가기

Image slideshow with captions Auto show with start / stop controls Manual show without infinite loop Slideshow using adaptiveHeight Carousels demystified - in depth explanation with examples Carousel - static number of slides showing Carousel - dynamic number of slides showing Thumbnail pager - method 1 Thumbnail pager - method 2 Vertical slideshow Custom next / prev control selectors Multiple slideshows Callback API Public methods Responsive video Ticker mode Custom easing Reload slider Reload slider with new settings

1. Image gallery with captions

JS:

$('.bxslider').bxSlider({ mode: 'fade', captions: true });

HTML:

2. Auto show with start / stop controls

JS:

$('.bxslider').bxSlider({ auto: true, autoControls: true });

HTML:

3. Manual show without infinite loop

JS:

$('.bxslider').bxSlider({ infiniteLoop: false, hideControlOnEnd: true });

HTML:

4. Slideshow using adaptiveHeight

JS:

$('.bxslider').bxSlider({ adaptiveHeight: true, mode: 'fade' });

HTML:

5. Carousels demystified - in depth explanation with examples

JS:

$(document).ready(function(){ $('.slider4').bxSlider({ slideWidth: 250, minSlides: 2, maxSlides: 3, moveSlides: 1, slideMargin: 10 }); });

HTML:

6. Carousel - static number of slides showing

JS:

$('.bxslider').bxSlider({ minSlides: 2, maxSlides: 2, slideWidth: 360, slideMargin: 10 });

HTML:

7. Carousel - dynamic number of slides showing

JS:

$('.bxslider').bxSlider({ minSlides: 3, maxSlides: 4, slideWidth: 170, slideMargin: 10 });

HTML:

8. Thumbnail pager - method 1

JS:

$('.bxslider').bxSlider({ pagerCustom: '#bx-pager' });

HTML:

9. Thumbnail pager - method 2

JS:

$('.bxslider').bxSlider({ buildPager: function(slideIndex){ switch(slideIndex){ case 0: return '<img src="/images/thumbs/tree_root.jpg">'; case 1: return '<img src="/images/thumbs/houses.jpg">'; case 2: return '<img src="/images/thumbs/hill_fence.jpg">'; } } });

HTML:

10. Vertical slideshow

JS:

$('.bxslider').bxSlider({ mode: 'vertical', slideMargin: 5 });

HTML:

11. Custom next / prev control selectors

This div is outside of the slider
|

JS:

$('.bxslider').bxSlider({ nextSelector: '#slider-next', prevSelector: '#slider-prev', nextText: 'Onward →', prevText: '← Go back' });

HTML:

<ul class="bxslider"> <li><img src="/images/730_200/hill_trees.jpg" /></li> <li><img src="/images/730_200/me_trees.jpg" /></li> <li><img src="/images/730_200/houses.jpg" /></li> </ul> <div class="outside"> <h3>This div is outside of the slider</h3> <p><span id="slider-prev"></span> | <span id="slider-next"></span></p> </div>

12. Multiple slideshows

Slideshow 1

Slideshow 2

JS:

$('#slider1').bxSlider({ mode: 'fade', autoControls: true, pause: 2000 }); $('#slider2').bxSlider({ autoControls: true, pause: 3000, slideMargin: 20 });

HTML:

<h3>Slideshow 1</h3> <ul id="slider1"> <li><img src="/images/730_200/hill_trees.jpg" /></li> <li><img src="/images/730_200/me_trees.jpg" /></li> <li><img src="/images/730_200/houses.jpg" /></li> </ul> <h3>Slideshow 2</h3> <ul id="slider2"> <li><img src="/images/730_200/tree_root.jpg" /></li> <li><img src="/images/730_200/trees.jpg" /></li> <li><img src="/images/730_200/hill_road.jpg" /></li> </ul>

13. Callback API

JS:

$('.bxslider').bxSlider({ onSliderLoad: function(){ // do funky JS stuff here alert('Slider has finished loading. Click OK to continue!'); }, onSlideAfter: function(){ // do mind-blowing JS stuff here alert('A slide has finished transitioning. Bravo. Click OK to continue!'); } });

HTML:

14. Public methods

Click me to go to the next slide
Click me to see the total slide count

JS:

HTML:

<ul class="bxslider"> <li><img src="/images/730_200/tree_root.jpg" /></li> <li><img src="/images/730_200/hill_fence.jpg" /></li> <li><img src="/images/730_200/houses.jpg" /></li> </ul> <p><a href="" id="slider-next">Click me to go to the next slide</a><br /> <a href="" id="slider-count">Click me to see the total slide count</a></p>

15. Responsive video

JS:

$('.bxslider').bxSlider({ video: true, useCSS: false });

HTML:

<ul class="bxslider"> <li> <iframe src="http://player.vimeo.com/video/17914974" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> </li> <li><img src="/images/730_200/houses.jpg" /></li> </ul>

The file jquery.fitvids.js (found in the plugins folder) must be called AFTER the jQuery library, and BEFORE the jquery.bxslider.js file. An example <head> could look like the following:

16. Ticker mode

JS:

$('.bxslider').bxSlider({ minSlides: 4, maxSlides: 4, slideWidth: 170, slideMargin: 10, ticker: true, speed: 6000 });

HTML:

17. Custom easing

JS:

$('.bxslider').bxSlider({ mode: 'horizontal', useCSS: false, infiniteLoop: false, hideControlOnEnd: true, easing: 'easeOutElastic', speed: 2000 });

HTML:

<ul class="bxslider"> <li><img src="/images/730_200/hill_trees.jpg" /></li> <li><img src="/images/730_200/me_trees.jpg" /></li> <li><img src="/images/730_200/houses.jpg" /></li> <li><img src="/images/730_200/tree_root.jpg" /></li> <li><img src="/images/730_200/hill_fence.jpg" /></li> <li><img src="/images/730_200/trees.jpg" /></li> </ul>

Note that in order to use the special easing functions provided by the jquery.easing plugin, 'useCSS' must be set to false (useCSS: false). The file jquery.easing.1.3.js (found in the plugins folder) must be called AFTER the jQuery library, and BEFORE the jquery.bxslider.js file. An example <head> could look like the following:

18. Reload slider

Click to add a slide, then reload the slider

JS:

var slider = $('.bxslider').bxSlider({ mode: 'horizontal' }); $('#reload-slider').click(function(e){ e.preventDefault(); $('.bxslider').append('<li><img src="/images/730_200/trees.jpg"></li>'); slider.reloadSlider(); });

HTML:

<ul class="bxslider"> <li><img src="/images/730_200/tree_root.jpg" title="Funky roots" /></li> <li><img src="/images/730_200/hill_road.jpg" title="The long and winding road" /></li> </ul> <p><a href="" id="reload-slider">Click to add a slide, then reload the slider</a></p>

19. Reload slider with new settings

Click to reload slider with new settings

JS:

HTML:

<ul class="bxslider"> <li><img src="/images/730_200/tree_root.jpg" /></li> <li><img src="/images/730_200/hill_road.jpg" /></li> </ul> <p><a href="" id="reload-slider">Click to reload slider with new settings</a></p>

'웹랩' 카테고리의 다른 글

슬림한 스크롤바 플러그인 (0)	2016.09.08
tomcat web.xml 예제 (0)	2016.07.25
sql 컬럼 값의 특정 단어 바꾸는 방법 (0)	2016.07.25
소스코드 구문 강조 (코드 하이라이터) (0)	2016.07.25
티스토리 파일 경로 확인하기 (0)	2016.07.25

지스토리

태그

최근글

댓글

공지사항

아카이브

설치방법

bxslider를 사용하기 위한 셋팅

HTML 마크업

bxslider 실행

Options

General

Pager

Controls

Auto

Carousel

Callbacks

Public methods

예제

예제 바로가기

1. Image gallery with captions

JS:

HTML:

2. Auto show with start / stop controls

JS:

HTML:

3. Manual show without infinite loop

JS:

HTML:

4. Slideshow using adaptiveHeight

JS:

HTML:

5. Carousels demystified - in depth explanation with examples

JS:

HTML:

6. Carousel - static number of slides showing

JS:

HTML:

7. Carousel - dynamic number of slides showing

JS:

HTML:

8. Thumbnail pager - method 1

JS:

HTML:

9. Thumbnail pager - method 2

JS:

HTML:

10. Vertical slideshow

JS:

HTML:

11. Custom next / prev control selectors

JS:

HTML:

12. Multiple slideshows

JS:

HTML:

13. Callback API

JS:

HTML:

14. Public methods

JS:

HTML:

15. Responsive video

JS:

HTML:

16. Ticker mode

JS:

HTML:

17. Custom easing

JS:

HTML:

18. Reload slider

JS:

HTML:

19. Reload slider with new settings

JS:

HTML:

'웹랩' 카테고리의 다른 글

관련글

티스토리툴바