Highly Configurable & Touch-Enable jQuery Slider Plugin - hipsterSlider

hipsterSlider is yet another jQuery slider plugin for creating highly configurable image sliders with lots of options and touch device support.

Features:

• Autoplay & infinite loop.
• Responsive design.
• Cross browser.
• Custom sliding orientation & direction.
• Two types of controls - buttons and pager.
• Touch features for mobile devices.
• CSS3 hardware acceleration supported.

Basic Usage:

1. Create a set of image using html unordered list.

<div class="slider">
<ul>
<li><img src="1.jpg" alt="" /></li>
<li><img src="2.jpg" alt="" /></li>
<li><img src="3.jpg" alt="" /></li>
</ul>
</div>

2. Include jQuery javascript library and jQuery hipsterSlider plugin in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript" src="jquery.hipsterSlider.js"></script> 

3. The required CSS rules for the slider.

.slider {
position: relative
}
.slider li {
position: relative;
width: 800px;
height: 200px
}
.slider li a {
position: absolute;
top: 0;
left: 0
}
.slider .pager-buttons {
position: absolute;
bottom: 15px;
width: 100%;
height: 15px;
text-align: center
}
.slider .pager-button {
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
*vertical-align:auto;
zoom: 1;
*display:inline;
margin: 0 3px;
width: 15px;
height: 15px
}
.slider .pager-button a {
display: block;
overflow: hidden;
width: 15px;
height: 15px;
text-indent: -999px;
background-image: url("../img/slider-pager.png");
background-repeat: no-repeat;
background-position: left top
}
.slider .pager-button.selected a {
background-position: right top
}
.slider .slider-button {
position: absolute;
overflow: hidden;
display: block;
top: 85px;
width: 30px;
height: 30px;
text-indent: -999px;
background-image: url("../img/slider-button.png")
}
.slider .slider-button.previous {
left: 10px;
background-position: left top
}
.slider .slider-button.previous:hover {
background-position: left bottom
}
.slider .slider-button.next {
right: 10px;
background-position: right top
}
.slider .slider-button.next:hover {
background-position: right bottom
}

4. Call the plugin with autoplay options.

$('.slider ul').hipsterSlider({
autoplay: true
})

5. Available options.

tagName: 'ul', // default base selector
orientation: ORIENTATION_HORIZONTAL, // sets the slide-orientation
displayClass: 'slider-display', // defines the classname for the display wrapper
initializeMinItems: true, // defines if the slideshow should initialize with the number (or less) of items to display
itemsClasses: false, // defines if the items should have classnames for their current position in the slideshow
itemsPrevClass: 'previous', // defines the classname for the previous positions
itemsCurrentClass: 'current', // defines the classname for the current position
itemsNextClass: 'next', // defines the classname for the next positions
itemsToDisplay: 1,
itemsToScroll: 1, // number of items to scroll
duration: 500, // sliding duration
width: undefined, // horizontal dimension for for the display (wrapper (overflow hidden))
height: undefined, // vertical dimension for for the display (wrapper (overflow hidden))
buttons: false, // activates scrolling buttons
buttonsWrap: false, // creates a wrapper div for the button-links
buttonsWrapClass: 'slider-buttons', // classname for the wrapper div
buttonsClass: 'slider-button', // classname for a button
buttonPrevLabel: 'previous', // label for the previous button
buttonPrevClass: 'previous', // classname for the previous button
buttonNextLabel: 'next', // label for the next button
buttonNextClass: 'next', // classname for the next button
buttonDisabledClass: 'disabled', // classname as indicator for a not available scrolling
buttonTargetSelector: undefined, // if set, the buttons will be placed into the defined selector
buttonTargetInsertionMethod: METHOD_DEFAULT, // possible variants: append, prepend, replace, insertAfter, insertBefore. Better see the public constants such as $.hipsterSlider.METHOD_APPEND etc.
buttonTemplate: function(data) {// default function which contains a button template
return '<a href="#" class="'+ data.buttonClass +' '+ data.directionClass +'">'+ data.label +'</a>';
},
buttonWrapTemplate: function(data) {// default function which contains a buttons wrapper template
return '<div class="'+ data.buttonsWrapClass +'" />';
},
pager: false, // activates paging buttons
pagerWrapClass: 'pager-buttons', // classname for the ul list of the pagers
pagerClass: 'pager-button', // classname for the li pager entry
pagerSelectedClass: 'selected', // classname for the selected/active page
pagerTargetSelector: undefined, // if set, the pager will be placed into the defined selector
pagerTargetInsertionMethod: METHOD_DEFAULT, // possible variants: append, prepend, replace, insertAfter, insertBefore. Better see the public constants such as $.hipsterSlider.METHOD_APPEND etc.
pagerTemplate: function(data) {// default function which contains a pager item template
return '<li class="'+ data.pagerClass +'"><a href="#">'+ data.count +'</a></li>';
},
pagerWrapTemplate: function(data) {// default function which contains the pager wrapper template
return '<ol class="'+ data.pagerWrapClass +'" />';
},
siteClasses: false, // adds to the display's parent the active page as classname
siteClassesClass: 'page', // classname for the active page
biglink: false, // allows to open a link inside a target-element defined by classname
biglinkClass: 'biglink', // classname for the biglink target*/
infinite: false, // allows unlimited scrolling in both directions
autoplay: false, // starts the slideshow automaticly
autoplayPause: 3000, // pause between each steps
autoplayDelay: 500, // defines the autoplay delay for each slider in a multiple jQuery-selection
autoplayDelayQueued: false, // defines if the autoplay delay sould be queued for each slider in a multiple jQuery-selection
autoplayDirection: DIRECTION_FORWARD, // defines the slide direction for autoplay
onUpdate: undefined, // a callback-function on each slide change
selectedClass: 'selected', // classname for a selected item
autoresize: false, // recalculates new available dimensions, when browser resizes
touch: false, // enables / disables touchfeature for mobile devices
touchTolerance: 20, // defines the tolerance in pixels to move before slide to a next position
touchDirectionTolerance: 45, // defines the tolerance in pixels until the regular touchsliding terminates when the other axis is used
useHardware: true // defines if the slider should detect css3-hardware-acceleration-features

Change logs:

2015-06-25

• fixed typo "buttonWrapTemplate" to "buttonsWrapTemplate" from DEFAULTS

2015-06-03

• Add commonjs and amd support

2014-07-08

• Fix issue where height of items wasn't calculated correctly

2014-07-04

• Update height calculation of items

2014-03-13

• Fix bug when slideshow freezes on specific touch gesture

2014-03-12

• Add getters & setters for itemsToScroll

2014-02-05

• Fix wrong references to the current position in getters

2014-01-08

• Fix issue when buttons target wasn't found for older jQuery versions
• Add link target detection for biglink feature

2014-01-06

• Fix issue when autoplay feature started at 2nd position

---

This awesome jQuery plugin is developed by schorfES. For more Advanced Usages, please check the demo page or visit the official website.