` for each slide. Slides can contain images, video, or any other HTML content!
@@ -49,7 +53,7 @@ Create a `
` element, with a `
` for each slide. Slides c
```
-###Step 3: Call the bxSlider
+### Step 3: Call the bxSlider
Call .bxSlider() on `
`. Note that the call must be made inside of a $(document).ready() call, or the plugin will not work!
@@ -59,11 +63,12 @@ $(document).ready(function(){
});
```
-##Configuration options
+## Configuration options
-###General
+### General
**mode**
+
Type of transition between slides
```
default: 'horizontal'
@@ -71,6 +76,7 @@ options: 'horizontal', 'vertical', 'fade'
```
**speed**
+
Slide transition duration (in ms)
```
default: 500
@@ -78,6 +84,7 @@ options: integer
```
**slideMargin**
+
Margin between each slide
```
default: 0
@@ -85,6 +92,7 @@ options: integer
```
**startSlide**
+
Starting slide index (zero-based)
```
default: 0
@@ -92,6 +100,7 @@ options: integer
```
**randomStart**
+
Start slider on a random slide
```
default: false
@@ -99,6 +108,7 @@ 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: ''
@@ -106,6 +116,7 @@ options: jQuery selector
```
**infiniteLoop**
+
If true, clicking "Next" while on the last slide will transition to the first slide and vice-versa
```
default: true
@@ -113,6 +124,7 @@ options: boolean (true / false)
```
**hideControlOnEnd**
+
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
```
default: false
@@ -120,6 +132,7 @@ 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
@@ -127,6 +140,7 @@ options: if using CSS: 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', '
```
**captions**
+
Include image captions. Captions are derived from the image's title attribute
```
default: false
@@ -134,6 +148,7 @@ options: boolean (true / false)
```
**ticker**
+
Use slider in ticker mode (similar to a news ticker)
```
default: false
@@ -141,6 +156,7 @@ 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
@@ -148,6 +164,7 @@ options: boolean (true / false)
```
**adaptiveHeight**
+
Dynamically adjust slider height based on each slide's height
```
default: false
@@ -155,6 +172,7 @@ options: boolean (true / false)
```
**adaptiveHeightSpeed**
+
Slide height transition duration (in ms). Note: only used if adaptiveHeight: true
```
default: 500
@@ -162,6 +180,7 @@ 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
@@ -169,6 +188,7 @@ options: boolean (true / false)
```
**responsive**
+
Enable or disable auto resize of the slider. Useful if you need to use fixed width sliders.
```
default: true
@@ -176,6 +196,7 @@ 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
@@ -183,6 +204,7 @@ 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'
@@ -190,6 +212,7 @@ options: 'all', 'visible'
```
**touchEnabled**
+
If true, slider will allow touch swipe transitions
```
default: true
@@ -197,6 +220,7 @@ 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
@@ -204,6 +228,7 @@ options: integer
```
**oneToOneTouch**
+
If true, non-fade slides follow the finger as it swipes
```
default: true
@@ -211,6 +236,7 @@ options: boolean (true / false)
```
**preventDefaultSwipeX**
+
If true, touch screen will not move along the x-axis as the finger swipes
```
default: true
@@ -218,6 +244,7 @@ options: boolean (true / false)
```
**preventDefaultSwipeY**
+
If true, touch screen will not move along the y-axis as the finger swipes
```
default: false
@@ -225,15 +252,17 @@ options: boolean (true / false)
```
**wrapperClass**
+
Class to wrap the slider in. Change to prevent from using default bxSlider styles.
```
default: 'bx-wrapper'
options: string
```
-###Pager
+### Pager
**pager**
+
If true, a pager will be added
```
default: true
@@ -241,6 +270,7 @@ 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'
@@ -248,6 +278,7 @@ options: 'full', 'short'
```
**pagerShortSeparator**
+
If pagerType: 'short', pager will use this value as the separating character
```
default: ' / '
@@ -255,6 +286,7 @@ options: string
```
**pagerSelector**
+
Element used to populate the populate the pager. By default, the pager is appended to the bx-viewport
```
default: ''
@@ -262,6 +294,7 @@ 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
@@ -269,15 +302,17 @@ 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
**controls**
+
If true, "Next" / "Prev" controls will be added
```
default: true
@@ -285,6 +320,7 @@ options: boolean (true / false)
```
**nextText**
+
Text to be used for the "Next" control
```
default: 'Next'
@@ -292,6 +328,7 @@ options: string
```
**prevText**
+
Text to be used for the "Prev" control
```
default: 'Prev'
@@ -299,6 +336,7 @@ options: string
```
**nextSelector**
+
Element used to populate the "Next" control
```
default: null
@@ -306,6 +344,7 @@ options: jQuery selector
```
**prevSelector**
+
Element used to populate the "Prev" control
```
default: null
@@ -313,6 +352,7 @@ options: jQuery selector
```
**autoControls**
+
If true, "Start" / "Stop" controls will be added
```
default: false
@@ -320,6 +360,7 @@ options: boolean (true / false)
```
**startText**
+
Text to be used for the "Start" control
```
default: 'Start'
@@ -327,6 +368,7 @@ options: string
```
**stopText**
+
Text to be used for the "Stop" control
```
default: 'Stop'
@@ -334,6 +376,7 @@ options: string
```
**autoControlsCombine**
+
When slideshow is playing only "Stop" control is displayed and vice-versa
```
default: false
@@ -341,6 +384,7 @@ options: boolean (true / false)
```
**autoControlsSelector**
+
Element used to populate the auto controls
```
default: null
@@ -348,21 +392,24 @@ options: jQuery selector
```
**keyboardEnabled**
+
Enable keyboard navigation for visible sliders
```
default: false
options: boolean (true / false)
```
-###Auto
+### Auto
**auto**
+
Slides will automatically transition
```
default: false
options: boolean (true / false)
```
**stopAutoOnClick**
+
Auto will stop on interaction with controls
```
default: false
@@ -370,6 +417,7 @@ options: boolean (true / false)
```
**pause**
+
The amount of time (in ms) between each auto transition
```
default: 4000
@@ -377,6 +425,7 @@ options: integer
```
**autoStart**
+
Auto show starts playing on load. If false, slideshow will start when the "Start" control is clicked
```
default: true
@@ -384,6 +433,7 @@ options: boolean (true / false)
```
**autoDirection**
+
The direction of auto show slide transitions
```
default: 'next'
@@ -391,6 +441,7 @@ options: 'next', 'prev'
```
**autoHover**
+
Auto show will pause when mouse hovers over slider
```
default: false
@@ -398,15 +449,17 @@ options: boolean (true / false)
```
**autoDelay**
+
Time (in ms) auto show should wait before starting
```
default: 0
options: integer
```
-###Carousel
+### 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
@@ -414,6 +467,7 @@ 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
@@ -421,13 +475,15 @@ 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.
+
+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
@@ -435,39 +491,45 @@ options: integer
```
**shrinkItems**
+
The Carousel will only show whole items and shrink the images to fit the viewport based on maxSlides/MinSlides.
```
default: false
options: boolean (true / false)
```
-###Keyboard
+### Keyboard
**keyboardEnabled**
+
Allows for keyboard control of visible slider. Keypress ignored if slider not visible.
```
default: false
options: boolean (true / false)
```
-###Accessibility
+### Accessibility
+
**ariaLive**
+
Adds Aria Live attribute to slider.
```
default: true
options: boolean (true / false)
```
-
+
**ariaHidden**
+
Adds Aria Hidden attribute to any nonvisible slides.
```
default: true
options: boolean (true / false)
```
-###Callbacks
+### Callbacks
**onSliderLoad**
+
Executes immediately after the slider is fully loaded
```
default: function(){}
@@ -477,6 +539,7 @@ arguments:
```
**onSliderResize**
+
Executes immediately after the slider is resized
```
default: function(){}
@@ -486,6 +549,7 @@ arguments:
```
**onSlideBefore**
+
Executes immediately before each slide transition.
```
default: function(){}
@@ -497,6 +561,7 @@ arguments:
```
**onSlideAfter**
+
Executes immediately after each slide transition. Function argument is the current slide element (when transition completes).
```
default: function(){}
@@ -508,6 +573,7 @@ arguments:
```
**onSlideNext**
+
Executes immediately before each "Next" slide transition. Function argument is the target (next) slide element.
```
default: function(){}
@@ -519,6 +585,7 @@ arguments:
```
**onSlidePrev**
+
Executes immediately before each "Prev" slide transition. Function argument is the target (prev) slide element.
```
default: function(){}
@@ -529,9 +596,20 @@ arguments:
newIndex: element index of the destination slide (after the transition)
```
-###Public methods
+**onAutoChange**
+
+Executes immediately after auto transtion starts or stops.
+```
+default: function(){}
+options: function(state){ // your code here }
+arguments:
+ state: the new state of "auto": boolean (true / false)
+```
+
+### Public methods
**goToSlide**
+
Performs a slide transition to the supplied slide index (zero-based)
```
example:
@@ -540,6 +618,7 @@ slider.goToSlide(3);
```
**goToNextSlide**
+
Performs a "Next" slide transition
```
example:
@@ -548,6 +627,7 @@ slider.goToNextSlide();
```
**goToPrevSlide**
+
Performs a "Prev" slide transition
```
example:
@@ -556,7 +636,7 @@ slider.goToPrevSlide();
```
**startAuto**
-Starts the auto show. Provide an argument false to prevent the auto controls from being updated.
+Starts the auto show. Provide an argument `false` to prevent the auto controls from being updated.
```
example:
slider = $('.bxslider').bxSlider();
@@ -564,7 +644,8 @@ slider.startAuto();
```
**stopAuto**
-Stops the auto show. Provide an argument false to prevent the auto controls from being updated.
+
+Stops the auto show. Provide an argument `false` to prevent the auto controls from being updated.
```
example:
slider = $('.bxslider').bxSlider();
@@ -572,6 +653,7 @@ slider.stopAuto();
```
**getCurrentSlide**
+
Returns the current active slide
```
example:
@@ -580,6 +662,7 @@ var current = slider.getCurrentSlide();
```
**getSlideCount**
+
Returns the total number of slides in the slider
```
example:
@@ -588,6 +671,7 @@ var slideQty = slider.getSlideCount();
```
**redrawSlider**
+
Redraw the slider. Useful when needing to redraw a hidden slider after it is unhidden.
```
example:
@@ -596,7 +680,8 @@ slider.redrawSlider();
```
**reloadSlider**
-Reload the slider. Useful when adding slides on the fly. Accepts an optional settings object. See here for an example.
+
+Reload the slider. Useful when adding slides on the fly. Accepts an optional settings object.
```
example:
slider = $('.bxslider').bxSlider();
@@ -604,6 +689,7 @@ slider.reloadSlider();
```
**destroySlider**
+
Destroy the slider. This reverts all slider elements back to their original state (before calling the slider).
```
example:
@@ -611,25 +697,15 @@ slider = $('.bxslider').bxSlider();
slider.destroySlider();
```
-### Install Grunt and Bower
+### Local Development with Gulp
**Unfamiliar with npm? Don't have node installed?** [Download and install node.js](http://nodejs.org/download/) before proceeding.
From the command line:
-1. Install `grunt-cli` and `bower` globally with `npm install -g grunt-cli bower`.
-2. Run `npm install`. npm will look at `package.json` and automatically install the necessary dependencies.
-3. Run `bower install`, which installs front-end packages defined in `bower.json`.
-
-When completed, you'll be able to run the various Grunt commands provided from the command line.
-
-### Available Grunt commands
-
-* `grunt` — Clean, Compile LESS to CSS, concatenate and validate JS, build documentation.
-* `grunt dist` — Clean, Compile LESS to CSS, concatenate and validate JS for plugin only.
-* `grunt docs` — Clean, build documentation only.
-* `grunt watch` — loads LiveReload, connects, and watches all assets.
-* `grunt zip` — Creates a zip of `/dist` and places it in `/download`.
+1. Install the CLI: `npm install --global gulp-cli`
+2. Run `npm install` to install local development tools
+3. Run `gulp` which will build the project
## Contributing
@@ -642,8 +718,36 @@ Everyone is welcome to help [contribute](CONTRIBUTING.md) and improve this proje
## Changelog
+### Version 4.2.12
+* Fixes auto control theme
+
+### Version 4.2.11
+* Removes auto-centering for sliders with no pager or controls
+
+### Version 4.2.10
+* Bumps npm and bower versions
+
+### Version 4.2.9
+* Removes node engine version requirement
+
+### Version 4.2.8
+* Removes auto-centering from the theme file (`jquery.bxslider.css`)
+
+### Version 4.2.7
+* Allows new version to be published to NPM
+
+### Version 4.2.6
+* Fix: jQuery 3 support
+* Adds Gulp and removes Grunt (for easier local development)
+
+### Version 4.2.5
+* Fix: Vertical carousel minSlides not working #840
+* Fix: slider breaks with css animations if settings.speed set to 0 #838
+* Fix: Slider runs into undefined state when reloadSlider is called before initialization was finished #833
+
### Version 4.2.4
-NOTICE: We have switched to a Grunt based build process in order to leverage [Assemble](http://assemble.io) for local documentation building. Please review the above notes about Grunt for the commands available.
+
+NOTICE: We have switched to a Grunt based build process in order to leverage [Assemble](http://assemble.io) for local documentation building. Please review the above notes about Grunt for the commands available.
* Fix: Fixed transition from first to last slide during infinite loop #778
* Fix: Reload on multiple sliders doesn't work? #755
@@ -656,7 +760,7 @@ NOTICE: We have switched to a Grunt based build process in order to leverage [As
* Enhancement: Slider getter through jquery object #739
* Enhancement: Add aria attributes #751
* Enhancement: Slider element in every callback and a new method getSliderElement (#780)
-* Enhancement: Local Documentiation and examples. I have added buildable documentation to the repo. This will expand over time and allow for community corrections as needed. Please see above Grunt notes on how to build.
+* Enhancement: Local Documentiation and examples. I have added buildable documentation to the repo. This will expand over time and allow for community corrections as needed. Please see above Grunt notes on how to build.
### Version 4.2.3
@@ -740,4 +844,4 @@ You now have all the necessary dependencies to run the build process.
* Slider now only needs to load visible slides (by default) in order to initialize which results in much faster loading. A "preloadImages" setting allows for configuration.
-Long live Zep.
\ No newline at end of file
+Long live Zep.
diff --git a/dist/images/pic1.jpg b/dist/images/pic1.jpg
new file mode 100644
index 00000000..f2cdf894
Binary files /dev/null and b/dist/images/pic1.jpg differ
diff --git a/dist/images/pic2.jpg b/dist/images/pic2.jpg
new file mode 100644
index 00000000..51401f2f
Binary files /dev/null and b/dist/images/pic2.jpg differ
diff --git a/dist/images/pic3.jpg b/dist/images/pic3.jpg
new file mode 100644
index 00000000..a3a027f4
Binary files /dev/null and b/dist/images/pic3.jpg differ
diff --git a/dist/index.html b/dist/index.html
new file mode 100644
index 00000000..cd6e1d39
--- /dev/null
+++ b/dist/index.html
@@ -0,0 +1,29 @@
+
+
+
+