Highly Configurable & Touch-Enable jQuery Slider Plugin - hipsterSlider

Highly Configurable & Touch-Enable jQuery Slider Plugin - hipsterSlider
File Size: 40.2 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.