API Docs for: 0.3.0
Show:

JQSlider Class

Plugin Constructor

Constructor

JQSlider

(
  • elem
  • [options]
)

Parameters:

  • elem HTMLElement

    element to be initialized

  • [options] Object optional

    Options for the Plugin Member

    • [circular=false] Boolean optional

      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.

    • [startSlide=0] Number optional

      Defines the slide number to be shown initially

    • [duration=500] Number optional

      Duration of the animation

    • [easingFunction='linear'] String optional

      If you have included the easing plugin, you can define an easing function for the animation.

    • [containerSelector='.jqs-container'] String optional

      Define the jquery selector of the container element for querying. Must be represented in the markup.

    • [listSelector='ul'] String optional

      Define the jquery selector of the list element for querying.

    • [slideTag='li'] String optional

      Define the tag name of the slide element for querying. It will be used for building the HTML template when

Methods

_endAnimation

(
  • slideNumber
  • counterwise
  • noAnimation
  • current
  • next
)
private

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:

  • slideNumber Number

    Number of the slide that had been animated in

  • counterwise Boolean

    if true the animation will move to the left or top if it's a vertical animation

  • noAnimation Boolean

    if true the slide will be shown right away, without animation

  • current JQuery

    jQuery element of the slide that was animated out

  • next JQuery

    jQuery element of the slide that was animated in

_getSibblingIndex

(
  • prev
)
Number | Boolean private

Returns the zero based position of the following slider.

Parameters:

Returns:

Number | Boolean: returns index of next slide or false

_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
)
private

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:

  • slideNumber Number

    Number of the slide that had been animated in

  • counterwise Boolean

    if true the animation will move to the left or top if it's a vertical animation

  • noAnimation Boolean

    if true the slide will be shown right away, without animation

  • current JQuery

    jQuery element of the slide that was animated out

  • next JQuery

    jQuery element of the slide that was animated in

addSlide

(
  • [slidePosition]
)
JQuery

Adds a new slide node into the slide container. Optionally the position of the new slide can be defined with slidePosition.

Parameters:

  • [slidePosition] Number optional

    position of the new slide to be appended to

Returns:

JQuery: returns the jQuery object of the created slide

getSlideCount

() Number

Returns the zero based length of the slides array.

Returns:

Number: returns the number of all slides

gotoSlide

(
  • slideNumber
  • [counterwise=false]
  • [noAnimation=false]
)
JQSlider chainable

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:

  • slideNumber Number

    number of slide to go to

  • [counterwise=false] Boolean optional

    optional set to true if the animation should go to the opposite direction

  • [noAnimation=false] Boolean optional

    optional set to true if slide should be shown instantly without an animation

Returns:

JQSlider: returns a chainable reference to JQSlider

init

() JQSlider chainable

Initializes the JQSlider plugin and binds the available events to it. Finally it triggers the init event.

Returns:

JQSlider: returns a chainable reference to JQSlider

next

() JQSlider chainable

Moves to the next slide

Returns:

JQSlider: returns a chainable reference to JQSlider

prev

() JQSlider chainable

Moves to the previous slide

Returns:

JQSlider: returns a chainable reference to JQSlider

removeSlide

(
  • slide
)

Removes a given slide, defined by the index or ID, or a whole jQuery slide set.

Parameters:

switchOrientation

() JQSlider chainable

Switches the orientation of the slider between horizontal and vertical.

Returns:

JQSlider: returns a chainable reference to JQSlider

Properties

$el

Object

Stores a reference to the jQuery object of the module

_av

Array private final

alignment value shortcuts

_block

Boolean private

set to true while animating to prevent double clicking

Default: false

_container

Object private

reference of the slider container

_handlers

Object private

jQuery set with all handlers found inside the JQSlider element with the class defined in css.handler.

_list

Object private

reference of the slider list element

_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.

_slides

Object private

jQuery set of all slide elements

_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

circular

Boolean

Set to true, for an endless animation.

Default: false

containerSelector

String

Define the jquery selector of the container element for querying. Must be represented in the markup.

Default: '.jqs-container'

duration

Number

Duration of the animation

Default: 500

easingFunction

String

If you have included the easing plugin, you can define an easing function for the animation.

Default: 'linear'

listSelector

String

Define the jquery selector of the list element for querying.

Default: 'ul'

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'

startSlide

Number

Zero based index of the slide to start with

Default: 0

Events

gotoslide

maps the event gotoslide to the API methdo gotoSlide

Event Payload:

  • slideNumber Number

    number of slide to go to

  • [counterwise=false] Boolean optional

    optional set to true if the animation should go to the opposite direction

  • [noAnimation=false] Boolean optional

    optional set to true if slide should be shown instantly without an animation

next

maps the event next to the API method next

prev

maps the event prev to the API method next