Initial import from local backup (Documents-Playground/pakerpale)
This commit is contained in:
578
assets/js/bxslider/readme.md
Normal file
578
assets/js/bxslider/readme.md
Normal file
@@ -0,0 +1,578 @@
|
||||
#bxSlider 4.1.2
|
||||
##The fully-loaded, responsive jQuery content slider
|
||||
|
||||
###Why should I use this slider?
|
||||
* Fully responsive - will adapt to any device
|
||||
* Horizontal, vertical, and fade modes
|
||||
* Slides can contain images, video, or HTML content
|
||||
* Full callback API and public methods
|
||||
* Small file size, fully themed, simple to implement
|
||||
* Browser support: Firefox, Chrome, Safari, iOS, Android, IE7+
|
||||
* Tons of configuration options
|
||||
|
||||
For complete documentation, tons of examples, and a good time, visit:
|
||||
|
||||
[http://bxslider.com](http://bxslider.com)
|
||||
|
||||
Written by: Steven Wanderski - [http://stevenwanderski.com](http://stevenwanderski.com)
|
||||
|
||||
###License
|
||||
Released under the MIT license - http://opensource.org/licenses/MIT
|
||||
|
||||
Let's get on with it!
|
||||
|
||||
##Installation
|
||||
|
||||
###Step 1: Link required files
|
||||
|
||||
First and most important, the jQuery library needs to be included (no need to download - link directly from Google). Next, download the package from this site and link the bxSlider CSS file (for the theme) and the bxSlider Javascript file.
|
||||
|
||||
```html
|
||||
<!-- jQuery library (served from Google) -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<!-- bxSlider Javascript file -->
|
||||
<script src="/js/jquery.bxslider.min.js"></script>
|
||||
<!-- bxSlider CSS file -->
|
||||
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />
|
||||
```
|
||||
|
||||
###Step 2: Create HTML markup
|
||||
|
||||
Create a `<ul class="bxslider">` element, with a `<li>` for each slide. Slides can contain images, video, or any other HTML content!
|
||||
|
||||
```html
|
||||
<ul class="bxslider">
|
||||
<li><img src="/images/pic1.jpg" /></li>
|
||||
<li><img src="/images/pic2.jpg" /></li>
|
||||
<li><img src="/images/pic3.jpg" /></li>
|
||||
<li><img src="/images/pic4.jpg" /></li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
###Step 3: Call the bxSlider
|
||||
|
||||
Call .bxslider() on `<ul class="bxslider">`. Note that the call must be made inside of a $(document).ready() call, or the plugin will not work!
|
||||
|
||||
```javascript
|
||||
$(document).ready(function(){
|
||||
$('.bxslider').bxSlider();
|
||||
});
|
||||
```
|
||||
|
||||
##Configuration options
|
||||
|
||||
###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. <code>'div.slide'</code>).<br />Note: by default, bxSlider will use all immediate children of the slider element
|
||||
```
|
||||
default: ''
|
||||
options: jQuery selector
|
||||
```
|
||||
|
||||
**infiniteLoop**
|
||||
If <code>true</code>, clicking "Next" while on the last slide will transition to the first slide and vice-versa
|
||||
```
|
||||
default: true
|
||||
options: boolean (true / false)
|
||||
```
|
||||
|
||||
**hideControlOnEnd**
|
||||
If <code>true</code>, "Prev" and "Next" controls will receive a class <code>disabled</code> when slide is the first or the last<br/>Note: Only used when <code>infiniteLoop: false</code>
|
||||
```
|
||||
default: false
|
||||
options: boolean (true / false)
|
||||
```
|
||||
|
||||
**easing**
|
||||
The type of "easing" to use during transitions. If using CSS transitions, include a value for the <code>transition-timing-function</code> property. If not using CSS transitions, you may include <code>plugins/jquery.easing.1.3.js</code> for many options.<br />See <a href="http://gsgd.co.uk/sandbox/jquery/easing/" target="_blank">http://gsgd.co.uk/sandbox/jquery/easing/</a> 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 <code>title</code> 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 <code>adaptiveHeight: true</code>
|
||||
```
|
||||
default: 500
|
||||
options: integer
|
||||
```
|
||||
|
||||
**video**
|
||||
If any slides contain video, set this to <code>true</code>. Also, include <code>plugins/jquery.fitvids.js</code><br />See <a href="http://fitvidsjs.com/" target="_blank">http://fitvidsjs.com/</a> 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 <code>true</code>, 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 <code>touchEnabled: true</code>
|
||||
```
|
||||
default: 50
|
||||
options: integer
|
||||
```
|
||||
|
||||
**oneToOneTouch**
|
||||
If <code>true</code>, non-fade slides follow the finger as it swipes
|
||||
```
|
||||
default: true
|
||||
options: boolean (true / false)
|
||||
```
|
||||
|
||||
**preventDefaultSwipeX**
|
||||
If <code>true</code>, touch screen will not move along the x-axis as the finger swipes
|
||||
```
|
||||
default: true
|
||||
options: boolean (true / false)
|
||||
```
|
||||
|
||||
**preventDefaultSwipeY**
|
||||
If <code>true</code>, touch screen will not move along the y-axis as the finger swipes
|
||||
```
|
||||
default: false
|
||||
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**
|
||||
If <code>true</code>, a pager will be added
|
||||
```
|
||||
default: true
|
||||
options: boolean (true / false)
|
||||
```
|
||||
|
||||
**pagerType**
|
||||
If <code>'full'</code>, a pager link will be generated for each slide. If <code>'short'</code>, a x / y pager will be used (ex. 1 / 5)
|
||||
```
|
||||
default: 'full'
|
||||
options: 'full', 'short'
|
||||
```
|
||||
|
||||
**pagerShortSeparator**
|
||||
If <code>pagerType: 'short'</code>, 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 <code><a data-slide-index="x"></code> element for each slide. See example <a href="/examples/thumbnail-method-1">here</a>. 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.<br />See <a href="http://bxslider.com/examples">examples</a> for detailed implementation
|
||||
```
|
||||
default: null
|
||||
options: function(slideIndex)
|
||||
```
|
||||
|
||||
###Controls
|
||||
|
||||
**controls**
|
||||
If <code>true</code>, "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 <code>true</code>, "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 <code>false</code>, 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 <code>>= minSlides</code>, and <code><= maxSlides</code>. 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
|
||||
```
|
||||
|
||||
**onSliderResize**
|
||||
Executes immediately after the slider is resized
|
||||
```
|
||||
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).
|
||||
```
|
||||
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**
|
||||
Executes immediately before each "Next" slide transition. Function argument is the target (next) slide element.
|
||||
```
|
||||
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**
|
||||
Executes immediately before each "Prev" slide transition. Function argument is the target (prev) slide element.
|
||||
```
|
||||
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)
|
||||
```
|
||||
|
||||
###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 <code>false</code> to prevent the auto controls from being updated.
|
||||
```
|
||||
example:
|
||||
slider = $('.bxslider').bxSlider();
|
||||
slider.startAuto();
|
||||
```
|
||||
|
||||
**stopAuto**
|
||||
Stops the auto show. Provide an argument <code>false</code> 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. <a href="/examples/reload-slider-settings">See here for an example.</a>
|
||||
```
|
||||
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();
|
||||
```
|
||||
|
||||
## Changelog
|
||||
|
||||
### Version 4.1.2
|
||||
* Added `bower.json` configuration file. Manage bxSlider as a dependency using [bower](http://bower.io/).
|
||||
|
||||
### Version 4.1.1
|
||||
* Removed imagesLoaded library and added iframe preloading support
|
||||
* Added responsive option - setting to false will prevent $(window).resize binding
|
||||
|
||||
### Version 4.1
|
||||
* Carousel mode (minSlides / maxSlides) was re-written to be more intuitive.
|
||||
* SlideWidth now acts as it should (slides respect the width value).
|
||||
* SlideWidth now properly parsed: accepts string ("600px") or integer (600).
|
||||
* 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.
|
||||
Reference in New Issue
Block a user