jQuery PlusSlider Plugin Examples
I do not fear death,
in view of the fact that I had been dead
for billions and billions of years
before I was born, and had not suffered
the slightest inconvenience from it.
- Mark Twain
in view of the fact that I had been dead
for billions and billions of years
before I was born, and had not suffered
the slightest inconvenience from it.
- Mark Twain
The difference between the right word
and the almost right word is the difference
between lightning and a lightning bug.
- Mark Twain
and the almost right word is the difference
between lightning and a lightning bug.
- Mark Twain
Nature knows no indecencies;
man invents them.
- Mark Twain
man invents them.
- Mark Twain
Features
- Slides are HTML (Can be images or text)
- Easily swap between fading & sliding
- Multiple PlusSliders per page
- Very simple & valid markup
- Autoplay (Optional)
- Next/Previous Navigation (Optional)
- Titled or numbered paginated navigation (Optional)
- Callback available after each slide
- Supports slides of various width and height
- Tested on IE6+ and modern browsers
Default Options
$('#slider').plusSlider({
/* General */
sliderType: 'slider', // Choose whether the carousel is a 'slider' or a 'fader'
width: false, // Overide the default CSS width
height: false, // Overide the default CSS width
/* Display related */
defaultSlide: 0, // Sets the default starting slide - Number based on item index
displayTime: 4000, // The amount of time the slide waits before automatically moving on to the next one. This requires 'autoPlay: true'
sliderEasing: 'linear', // Anything other than 'linear' and 'swing' requires the easing plugin
speed: 500, // The amount of time it takes for a slide to fade into another slide
/* Functioanlity related */
autoPlay: true, // Creats a times, looped 'slide-show'
keyboardNavigation: true, // The keyboard's directional left and right arrows function as next and previous buttons
pauseOnHover: true, // AutoPlay does not continue ifsomeone hovers over Plus Slider.
/* Arrow related */
createArrows: true, // Creates forward and backward navigation
nextText: 'Next', // Adds text to the 'next' trigger
prevText: 'Previous', // Adds text to the 'prev' trigger
/* Pagination related */
createPagination: true, // Creates Numbered pagination
paginationPosition: 'prepend', // Place the pagination above the slider within the HTML
paginationWidth: false, // Automatically gives the pagination a dynamic width
paginationTitle: false, // Checks for attribute 'data-title' on each slide and names the pagination accordingly
/* Callbacks */
onSlide: null // Callback function
});
Changelog
Version 1.4
- Added slider support for dynamic
width
andheight
- Streamlined the script
- Removed the
paginationThumbnails
option - Set the
paginationWidth
to default to false - Changed the title of the option
autoPlay
toautoPlay
- Added
defaultSlide
option - Added comments throughout the jquery.plusslider.js file as well as made it more human-readable
- Changed a couple of element types and class names
- Added
.plusslide-container
class to the.child
parent
Version 1.3
- Added nextText and prevText options
- Added the paginationThumbnails option
- Added the nextSlide() functionality to toSlide()
- Removed the nextSlide() function - Redundant
Version 1.2.6
- Added a paginationTitle
- Plugin optimization
- Added a minimal style option for easier CSS customization - jordanlev
- Added callback function - jordanlev
- Added toSlide() function - jordanlev
Version 1.2
- Added option to place pagination before the slides
- Fixed a bug where PlusSlider wouldn't fade when display was set to none
- Removed version number from all file names
Version 1.1
- Added support for multiple sliders per page
- Added a
width
&height
option
Version 1
- First official version