Demonstartion
Default initialization
To initialize the slider just call the jquery-plugin on an selected ul-element. As you can see below, the function did't have any options. That's the reason why there is no visible activity at the slider.
Autoplay & infinite
If you set the option autoplay to true. the slideshow automaticly starts to play. This often makes sense to use also the option infinite to true. When infinite is not set, the autoplay-feature stops at the end of all slides.
infinite: true,
autoplay: true
});
Orientation & Direction
The slider provides the feature to slide the slides horizontally and vertically. This feature is set with the option orientation. By default the value 'horizontal' is set. To apply the vertically mode set the value to 'horizontal'.
Both values can also be set by the variables $.hipsterSlider.HORIZONTAL and $.hipsterSlider.VERTICAL.
To set the direction of the autoplay animation, you can set the autoplayDirection option to 1 or -1. The default value is 1. You can also set the value by the variables $.hipsterSlider.FORWARD and $.hipsterSlider.BACKWARD.
infinite: true,
autoplay: true,
autoplayDirection: $.hipsterSlider.BACKWARD,
orientation: $.hipsterSlider.VERTICAL
});
Controls
The slider provides two types of controls - buttons and pager. The buttons allows the user to go one step forward or backward inside the slideshow. The pager creates a navigable, numerated index of all slides as an ol-element. Both features can be activated if the options buttons and/or pager are set to true.
The buttons and pager are fully styleable as you can see in the example above. They have also alot of other additional options for customization. The full list of options is documented above.
infinite: true,
buttons: true,
pager: true
});
Touch (horizontal/vertical)
The slider has support for touch devices. Set the touch option to true to enable this feature.
touch: true
});