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 - Type of the movement
  • startAt - Start at specific slide number
  • perView - A number of visible slides
  • focusAt - Focus currently active slide at a specified position
  • gap - A size of the space between slides
  • autoplay - Change slides after a specified interval
  • hoverpause - Stop autoplay on mouseover
  • keyboard - Change slides with keyboard arrows
  • bound - Stop running perView number of slides from the end
  • swipeThreshold - Minimal swipe distance needed to change the slide
  • dragThreshold - Minimal mousedrag distance needed to change the slide
  • perTouch - A maximum number of slides moved per single swipe or drag
  • touchRatio - Alternate moving distance ratio of swiping and dragging
  • touchAngle - Angle required to activate slides moving
  • animationDuration - Duration of the animation
  • rewind - Allow looping the slider type
  • rewindDuration - Duration of the rewinding animation
  • animationTimingFunc - Easing function for the animation
  • direction - Moving direction mode
  • peek - The value of the future viewports which have to be visible in the current view
  • breakpoints - Collection of options applied at specified media breakpoints
  • classes - Collection of used HTML classes
  • throttle - Throttle costly events

type

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.

default: 'slider' type: String

  • 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

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

default: 0 type: Number

  • 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

A number of slides visible on the single viewport.

default: 1 type: Number

  • 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

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.

default: 0 type: Number|String

  • 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

A size of the gap added between slides.

default: 10 type: Number

  • 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

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

default: false type: Number|Boolean

  • 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

Stop autoplay on mouseover event.

default: true type: Boolean

  • 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

Allow for changing slides with left and right keyboard arrows.

default: true type: Boolean

  • 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()

bound

Works only with slider type and a non-centered focusAt setting.

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.

default: false type: Boolean

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

slides to the end edge 

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

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

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

glide.mount()

swipeThreshold

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

default: 80 type: Number|Boolean

  • 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

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

default: 120 type: Number|Boolean

  • 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

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

default: false type: Number|Boolean

  • 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

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

default: 0.5 type: Number

  • 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

Angle required to activate slides moving on swiping or dragging.

default: 45 type: Number

  • 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

Duration of the animation in milliseconds.

default: 400 type: Number

  • 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()

rewind

Works only with slider type.

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

default: true type: Boolean

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

instance to the first/last slide 

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

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

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

glide.mount()

rewindDuration

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

default: 800 type: Number

  • 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

Easing function for the animation.

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

  • 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

Moving direction mode. Available inputs:

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

default: 'ltr' type: String

  • 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

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.

default: 0 type: Number|Object

  • 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

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

{
  800: {
    perView: 2
  }
}

default: {} type: Object

  • 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

Collection of internally used HTML classes. Default values:

type: Object

{
  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

Throttle costly events at most once per every wait milliseconds.

default: 25 type: Number