Props

type

Type of the movement. Available types

Type: String

Accepted values: slider, carousel

Default: slider

startAt

Start at specific slide number defined with zero-based index

Type: Number

Accepted values: -

Default: 0

perView

A number of slides visible on the single viewport

Type: Number

Accepted values: -

Default: 3

focusAt

Focus currently active slide at a specified position in the track. Available inputs

Type: String, Number

Accepted values: center, 1,2,3...

Default: 0

gap

A size of the gap added between slides

Type: Number

Accepted values: -

Default: 10

autoplay

Change slides after a specified interval. Use false for turning off autoplay

Type: Number, Boolean

Accepted values: -

Default: false

hoverpause

Stop autoplay on mouseover event

Type: Boolean

Accepted values: -

Default: true

keyboard

Allow for changing slides with left and right keyboard arrows

Type: Boolean

Accepted values: -

Default: true

bound

Stop running perView number of slides from the end. Use this option if you don't want to have an empty space after a slider

Type: Boolean

Accepted values: -

Default: false

swipeThreshold

Minimal swipe distance needed to change the slide. Use false for turning off a swiping

Type: Number, Boolean

Accepted values: -

Default: 80

dragThreshold

Minimal mouse drag distance needed to change the slide. Use false for turning off a dragging

Type: Number, Boolean

Accepted values: -

Default: 120

perTouch

A maximum number of slides to which movement will be made on swiping or dragging. Use false for unlimited

Type: Number, Boolean

Accepted values: -

Default: false

touchRatio

Alternate moving distance ratio of the slides on a swiping and dragging

Type: Number

Accepted values: -

Default: 0.5

touchAngle

Angle required to activate slides moving on swiping or dragging

Type: Number

Accepted values: -

Default: 45

animationDuration

Duration of the animation in milliseconds

Type: Number

Accepted values: -

Default: 100

rewind

Allows looping the slider type. Slider will rewind to the first/last slide when it's at the start/end

Type: Boolean

Accepted values: -

Default: true

rewindDuration

Duration of the rewinding animation of the slider type in milliseconds

Type: Number

Accepted values: -

Default: 800

animationTimingFunc

Easing function for the animation

Type: String

Accepted values: -

Default: cubic-bezier(0.165, 0.840, 0.440, 1.000)

direction

Moving direction mode. Available inputs

Type: String

Accepted values: ltr, rtl

Default: cubic-bezier(0.165, 0.840, 0.440, 1.000)

peek

The distance value of the next and previous viewports which have to peek in the current view. Accepts number and pixels as a string. Left and right peeking can be setup separately with a directions object

  • 100 - peek 100px on the both sides
  • { before: 100, after: 50 } - peek 100px on the left side and 50px on the right side

Type: Number, Object

Accepted values: -

Default: 0

breakpoints

Collection of options applied at specified media breakpoints

For example, display two slides per view under 800px:

{
  800: {
    perView: 2
  }
}

Type: Object

Accepted values: -

Default: {}

classes

Collection of internally used HTML classes. Default values:

{
  direction: {
    ltr: 'glide--ltr',
    rtl: 'glide--rtl'
  },
  slider: 'glide--slider',
  carousel: 'glide--carousel',
  swipeable: 'glide--swipeable',
  dragging: 'glide--dragging',
  cloneSlide: 'glide__slide--clone',
  activeNav: 'glide__bullet--active',
  activeSlide: 'glide__slide--active',
  disabledArrow: 'glide__arrow--disabled'
}

Type: Object

Accepted values: -

Default:

throttle

Throttle costly events at most once per every wait milliseconds

Type: Number

Accepted values: -

Default: 25

options

For convenience, the transfer of all of the above properties in a single object

Type: Object

Accepted values: -

Default: {}