Options

Glide can be adjusted with various options. Pass an object as an argument while initializing a new instance

new Glide('.glide', {
  type: 'carousel',
  startAt: 0,
  perView: 3
})

Reference

type default: 'slider' type: String

Type of the movement. Available types:

  • slider - rewinds slider to the start/end when it reaches first or last slide,
  • carousel - changes slides without starting over when it reaches first or last slide.

  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

Initialize as type

var select = document.querySelector('#options-type-select')

var glide = new Glide('#options-type', {
  type: select.value,
  focusAt: 'center',
  perView: 3
})

select.addEventListener('change', function (event) {
  glide.update({
    type: event.target.value
  })
})

glide.mount()


startAt default: 0 type: Number

Start at specific slide number defined with zero-based index.

  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

Start glide at index

var input = document.querySelector('#options-start-at-input')

var glide = new Glide('#options-start-at', {
  startAt: input.value,
  perView: 3
})

input.addEventListener('input', function (event) {
  glide.update({
    startAt: event.target.value
  })
})

glide.mount()


perView default: 1 type: Number

A number of slides visible on the single viewport.

  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

Display slides per view

var input = document.querySelector('#options-per-view-input')

var glide = new Glide('#options-per-view', {
  perView: input.value
})

input.addEventListener('input', function (event) {
  glide.update({
    perView: event.target.value
  })
})

glide.mount()


focusAt default: 0 type: Number|String

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

  • 'center' - current slide will be always focused at the center of a track,
  • 1,2,3... - current slide will be focused on the specified zero-based index.

  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

Focus active slide at or index

var input = document.querySelector('#options-focus-at-input')
var checkbox = document.querySelector('#options-focus-at-checkbox')

var glide = new Glide('#options-focus-at', {
  focusAt: input.value,
  perView: 4
})

function focus () {
  glide.update({
    focusAt: (checkbox.checked) ? checkbox.value : input.value
  })
}

input.addEventListener('input', focus)
checkbox.addEventListener('change', function () {
  input.disabled = checkbox.checked

  focus()
})

glide.mount()


gap default: 10 type: Number

A size of the gap added between slides.

  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

Gaps between slides should be pixels wide

var input = document.querySelector('#options-gap-input')

var glide = new Glide('#options-gap', {
  gap: input.value,
  perView: 3
})

input.addEventListener('input', function (event) {
  glide.update({
    gap: event.target.value
  })
})

glide.mount()


autoplay default: false type: Number|Boolean

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

  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

Automatically change slides after milliseconds

var input = document.querySelector('#options-autoplay-input')

var glide = new Glide('#options-autoplay', {
  autoplay: input.value,
  hoverpause: false,
  perView: 3
})

input.addEventListener('input', function (event) {
  glide.update({
    autoplay: (event.target.value != 0) ? event.target.value : false
  })
})

glide.mount()


hoverpause default: true type: Boolean

Stop autoplay on mouseover event.

  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

autoplaying when cursor is over the slider

var checkbox = document.querySelector('#options-hoverpause-checkbox')

var glide = new Glide('#options-hoverpause', {
  hoverpause: checkbox.checked,
  autoplay: 2000,
  perView: 3
})

checkbox.addEventListener('change', function () {
  glide.update({
    hoverpause: checkbox.checked
  })
})

glide.mount()


keyboard default: true type: Boolean

Allow for changing slides with left and right keyboard arrows.

  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

slides when pressing left or right arrow keys

var checkbox = document.querySelector('#options-keyboard-checkbox')

var glide = new Glide('#options-keyboard', {
  keyboard: checkbox.checked,
  perView: 3
})

checkbox.addEventListener('change', function () {
  glide.update({
    keyboard: checkbox.checked
  })
})

glide.mount()


swipeThreshold default: 80 type: Number|Boolean

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

  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

Change slide after swiping pixels. Demo should be tested on mobile device or emulation environment.

var input = document.querySelector('#options-swipe-threshold-input')

var glide = new Glide('#options-swipe-threshold', {
  swipeThreshold: input.value,
  perView: 3
})

input.addEventListener('input', function (event) {
  glide.update({
    swipeThreshold: (event.target.value != 0) ? event.target.value : false
  })
})

glide.mount()


dragThreshold default: 120 type: Number|Boolean

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

  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

Change slide after mouse dragging pixels.

var input = document.querySelector('#options-drag-threshold-input')

var glide = new Glide('#options-drag-threshold', {
  dragThreshold: input.value,
  perView: 3
})

input.addEventListener('input', function (event) {
  glide.update({
    dragThreshold: (event.target.value != 0) ? event.target.value : false
  })
})

glide.mount()


perTouch default: false type: Number|Boolean

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

  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

Move up to slides per swipe

var input = document.querySelector('#options-per-touch-input')

var glide = new Glide('#options-per-touch', {
  perTouch: input.value,
  perView: 4,
  touchRatio: 1
})

input.addEventListener('input', function (event) {
  glide.update({
    perTouch: (event.target.value != 0) ? event.target.value : false
  })
})

glide.mount()


touchRatio default: 0.5 type: Number

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

  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

Alternate swiping and dragging by

var input = document.querySelector('#options-touch-ratio-input')

var glide = new Glide('#options-touch-ratio', {
  touchRatio: input.value,
  perTouch: false,
  perView: 3
})

input.addEventListener('input', function (event) {
  glide.update({
    touchRatio: event.target.value
  })
})

glide.mount()


touchAngle default: 45 type: Number

Angle required to activate slides moving on swiping or dragging.

  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

Move slides on maximum touching angle degree when swiping or dragging

var input = document.querySelector('#options-touch-angle-input')

var glide = new Glide('#options-touch-angle', {
  touchAngle: input.value,
  perView: 3
})

input.addEventListener('input', function (event) {
  glide.update({
    touchAngle: event.target.value
  })
})

glide.mount()


animationDuration default: 400 type: Number

Duration of the animation in milliseconds.

  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

Duration of the animation have be milliseconds

var input = document.querySelector('#options-animation-duration-input')

var glide = new Glide('#options-animation-duration', {
  animationDuration: input.value,
  perView: 3
})

input.addEventListener('input', function (event) {
  glide.update({
    animationDuration: event.target.value
  })
})

glide.mount()


rewindDuration default: 800 type: Number

Duration of the rewinding animation of the slider type in milliseconds.

  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

Duration of the rewinding have be milliseconds

var input = document.querySelector('#options-rewind-duration-input')

var glide = new Glide('#options-rewind-duration', {
  rewindDuration: input.value,
  startAt: 9,
  perView: 3
})

input.addEventListener('input', function (event) {
  glide.update({
    rewindDuration: event.target.value
  })
})

glide.mount()


animationTimingFunc default: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)' type: String

Easing function for the animation.

  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

Ease moving animation with timing function

var select = document.querySelector('#options-animation-timing-func-select')

var glide = new Glide('#options-animation-timing-func', {
  animationTimingFunc: select.value,
  animationDuration: 800,
  perView: 3
})

select.addEventListener('change', function (event) {
  glide.update({
    animationTimingFunc: event.target.value
  })
})

glide.mount()


direction default: 'ltr' type: String

Moving direction mode. Available inputs:

  • 'ltr' - left to right movement,
  • 'rtl' - right to left movement.

  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

Use moving direction

var select = document.querySelector('#options-direction-select')

var glide = new Glide('#options-direction', {
  direction: select.value,
  perView: 3
})

select.addEventListener('change', function (event) {
  glide.update({
    direction: event.target.value
  })
})

glide.mount()


peek default: 0 type: Number|Object

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. For example:

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

  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

Peek pixels on the left and on right side

var before = document.querySelector('#options-peek-before')
var after = document.querySelector('#options-peek-after')

var glide = new Glide('#options-peek', {
  startAt: 1,
  perView: 3,
  peek: {
    before: before.value,
    after: after.value
  }
})

function peek () {
  glide.update({
    peek: {
      before: before.value,
      after: after.value
    }
  })
}

before.addEventListener('input', peek)
after.addEventListener('input', peek)

glide.mount()


breakpoints default: {} type: Object

Collection of options applied at specified media breakpoints. For example, display two slides per view under 800px:

{
  800: {
    perView: 2
  }
}

  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

Resize your broswer window to see effect

var glide = new Glide('#options-breakpoints', {
  perView: 3,
  breakpoints: {
    1024: {
      perView: 2
    },
    600: {
      perView: 1
    }
  }
})

glide.mount()


classes type: Object

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'
}

throttle default: 25 type: Number

Throttle costly events at most once per every wait milliseconds.