JQSlider Class
Plugin Constructor
Constructor
JQSlider
-
elem -
[options]
Parameters:
-
elemHTMLElementelement to be initialized
-
[options]Object optionalOptions for the Plugin Member
-
[circular=false]Boolean optionalYou can prevent an automatic initialisation of the slider if you want to run it later on. This is than helpful, if you need the instance of the plugin to access its methods, like
addSlide, but you don't want the slides to be setup. BecauseJQSlideradds classes to all elements that applies styling to it, like hiding not needed slides, so that it can prevent you from determining the correct height and width values of its child elements. -
[startSlide=0]Number optionalDefines the slide number to be shown initially
-
[duration=500]Number optionalDuration of the animation
-
[easingFunction='linear']String optionalIf you have included the easing plugin, you can define an easing function for the animation.
-
[containerSelector='.jqs-container']String optionalDefine the jquery selector of the container element for querying. Must be represented in the markup.
-
[listSelector='ul']String optionalDefine the jquery selector of the list element for querying.
-
[slideTag='li']String optionalDefine the tag name of the slide element for querying. It will be used for building the HTML template when
-
Item Index
Methods
Properties
Attributes
Methods
_endAnimation
-
slideNumber -
counterwise -
noAnimation -
current -
next
This function is called when the animation ends. All slides are reset to default with the next slide as current slide. It is excluded from the animation method to help building a inherited Slider class.
Parameters:
-
slideNumberNumberNumber of the slide that had been animated in
-
counterwiseBooleanif true the animation will move to the left or top if it's a vertical animation
-
noAnimationBooleanif true the slide will be shown right away, without animation
-
currentJQueryjQueryelement of the slide that was animated out -
nextJQueryjQueryelement of the slide that was animated in
_getSibblingIndex
-
prev
Returns the zero based position of the following slider.
Parameters:
-
prevBoolean
_initControls
()
private
Initialises the Slider controls and binds them to the previous and next methods.
_initSlider
()
private
Initializes the slider and all slides, set class names on all objects and display the first slide
_resetControls
()
private
Hides the previous handler, respectively next handler, if no circular animation is configured and the first, respectively last slide is reached.
_startAnimation
-
slideNumber -
counterwise -
noAnimation -
current -
next
This function is called when the animation started. It is excluded from the animation method to help building a inherited Slider class. In this case it triggers the animation start event.
Parameters:
-
slideNumberNumberNumber of the slide that had been animated in
-
counterwiseBooleanif true the animation will move to the left or top if it's a vertical animation
-
noAnimationBooleanif true the slide will be shown right away, without animation
-
currentJQueryjQueryelement of the slide that was animated out -
nextJQueryjQueryelement of the slide that was animated in
addSlide
-
[slidePosition]
Adds a new slide node into the slide container. Optionally the position
of the new slide can be defined with slidePosition.
Parameters:
-
[slidePosition]Number optionalposition of the new slide to be appended to
Returns:
jQuery object of the created slide
getSlideCount
()
Number
Returns the zero based length of the slides array.
Returns:
gotoSlide
-
slideNumber -
[counterwise=false] -
[noAnimation=false]
Moves to the given slide number. The direction, based on the
orientation (horizontal/vertical), can be set with counterwise. If
you want to jump directly to the slide, without an animation, pass
noAnimation as true.
Parameters:
Returns:
init
()
JQSlider
chainable
Initializes the JQSlider plugin and binds the available events to it.
Finally it triggers the init event.
Returns:
JQSlider
next
()
JQSlider
chainable
Moves to the next slide
Returns:
JQSlider
prev
()
JQSlider
chainable
Moves to the previous slide
Returns:
JQSlider
removeSlide
-
slide
Removes a given slide, defined by the index or ID, or a whole jQuery slide set.
Properties
_handlers
Object
private
jQuery set with all handlers found inside the JQSlider element
with the class defined in css.handler.
_nextHandler
Object
private
jQuery set with all handlers found inside the JQSlider element
with the class defined in css.nextHandler.
_o
Object
private
Object with the configuration options of the module, the plugin defaults will be extended with options passed while initialisation and last by options set in the `data-options attribute of the HTML element of the slider
_prevHandler
Object
private
jQuery set with all handlers found inside the JQSlider element
with the class defined in css.prevHandler.
_tmpl
String
private
This "template" is used to generate new slides, it is build using the `slideTag config value.
activeIndex
Number
Index of the current active slide. Can be defined by configuration
or by adding the class jqs-current to the appropriate slide.
Default: 0
defaults
Object
Stores all configuration settings, this set will be extended with client configuration objects
isVertical
Boolean
Defines if the layout of the slider is vertical or not. Will be defined initially by the css class 'jqs-vertical' of the element.
Default: false
Attributes
autoinit
Boolean
You can prevent an automatic initialisation of the slider if you want to run it later on. This is than helpful, if you need the instance of the plugin to access its methods, like addSlide, but you don't want the slides to be setup. Because JQSlider adds classes to all elements that applies styling to it, like hiding not needed slides, so that it can prevent you from determining the correct height and width values of its child elements.
Default: true
containerSelector
String
Define the jquery selector of the container element for querying. Must be represented in the markup.
Default: '.jqs-container'
easingFunction
String
If you have included the easing plugin, you can define an easing function for the animation.
Default: 'linear'
slideTag
String
Define the tag name of the slide element for querying. It will be used for building the HTML template when creating a new slide.
Default: 'li'
Events
gotoslide
maps the event gotoslide to the API methdo gotoSlide
next
maps the event next to the API method next
prev
maps the event prev to the API method next