# Class: Slider

## Slider

#### new Slider($slider [, userOptions])

  Slider

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `$slider` | HTMLElement |  |

  `userOptions`

  Object

  <optional>

  ###### Properties

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `startSlide` | Number | <optional> | 0 |
  `nbSlideVisibleBefore` | Number | <optional> | 0 |
  `nbSlideVisibleAfter` | Number | <optional> | 0 |
  `slidePerPage` | Number | <optional> | 1 |
  `moveByPage` | Boolean | <optional> | true |
  `speed` | Number | <optional> | 0.5 | In second
  `listSelector` | String | <optional> | .list |
  `itemsSelector` | String | <optional> | .item |
  `activeClass` | String | <optional> | active-slide |
  `loop` | Boolean | <optional> | true |
  `smoothHeight` | Boolean | <optional> | true |
  `onBefore` | Callback | <optional> | data => {} | Called one time at the begining of the animation
  `onBeforeEach` | Callback | <optional> | data => {} | Called for every slide that will come in the 1st position during the animation
  `onAfter` | Callback | <optional> | data => {} | Called one time at the end of the animation
  `onAfterEach` | Callback | <optional> | data => {} | Called for every slide that is came in the 1st position during the animation
  `onStart` | Callback | <optional> | data => {} | Called one time at the initialisation of the slider

  `options._setStyle` | function | <optional> | Internal function using GSAP to set CSS styles. Can be override to use another library
  `options._tweenTo` | function | <optional> | Internal function using GSAP to tween element. Can be override to use another library
  `options._tweenFromTo` | function | <optional> | Internal function using GSAP to initialize and tween element. Can be override to use another library
  `options._killTweens` | function | <optional> | Internal function using GSAP to remove tweens from element. Can be override to use another library

  See:
    - extra/modules/slider.md

  ##### Example

      let slider = new Slider( $slider, options );
      promise = slider.previous();

### Members

#### $list :HTMLElement

  Wrapper of the slides

  ##### Type:

  - HTMLElement

#### $slider :HTMLElement

  The DOM element of the slider

  ##### Type:

  - HTMLElement

#### $slides :Array.<HTMLElement>

  All slides

  ##### Type:

  - Array.<HTMLElement>

#### bulletCount :Number

  Number of bullet needed in a pager

  ##### Type:

  - Number

#### pageCount :Number

  Number of pages (can have several slides by page)

  ##### Type:

  - Number

#### slideCount :Number

  Number of slides

  ##### Type:

  - Number

### Methods

#### destroy()

  Remove all events, css class or inline styles

#### getCurrentSlide()

  Get the current active slide

  ##### Returns:

  Type
    Slide

#### getSlide(index)

  Get a slide in function of an index

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `index` | Number |

  ##### Returns:

  Type
    Slide

#### goTo(page [, $button])

  Go to the asked slide or page

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `page` | Number |  |
  `$button` | HTMLElement | <optional> | Internal use only

  ##### Returns:

  Type
    Promise

#### isEnabled()

  Check if the slider is enable or not

  ##### Returns:

  Type
    Boolean

#### next( [$button])

  Go to the next slide or page

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `$button` | HTMLElement | <optional> | Internal use only

  ##### Returns:

  Type
    Promise

#### previous( [$button])

  Go to the previous slide or page

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `$button` | HTMLElement | <optional> | Internal use only

  ##### Returns:

  Type
    Promise

### Type Definitions

#### Slide

  ##### Type:

  - object

  ##### Properties:

  Name | Type | Description
  --- | --- | ---
  `$slide` | HTMLElement |
  `id` | String |
  `delay` | Number | In seconds
  `index` | Number |
  `position` | Number | (= index + 1)
  `isFirst` | Boolean |
  `isLast` | Boolean |
  `isVisible` | Boolean |
  `isActive` | Boolean |

#### SlideEventData_Params

  ##### Type:

  - Object

  ##### Properties:

  Name | Type | Description
  --- | --- | ---
  `targetSlide` | Slide |
  `currentSlide` | Slide |
  `direction` | Number | 1 = next, -1 = previous

### Events

#### after

  After starting to move. Only one time for the whole animation.

  ##### Type: Object

  ##### Properties:

  Name | Type | Description
  --- | --- | ---
  `data` | SlideEventData_Params |

#### afterEach

  After each slide move. If moving for 3 slides, it will be called 3 times.

  ##### Type: Object

  ##### Properties:

  Name | Type | Description
  --- | --- | ---
  `data` | SlideEventData_Params |

#### before

  Before starting to move. Only one time for the whole animation.

  ##### Type: Object

  ##### Properties:

  Name | Type | Description
  --- | --- | ---
  `data` | SlideEventData_Params |

#### beforeEach

  Before each slide move. If moving for 3 slides, it will be called 3 times.

  ##### Type: Object

  ##### Properties:

  Name | Type | Description
  --- | --- | ---
  `data` | SlideEventData_Params |

#### start

  On the initialization of the slider

  ##### Type: Object

  ##### Properties:

  Name | Type | Description
  --- | --- | ---
  `data` | SlideEventData_Params | Only currentSlide property

#### Search results