API

Bunch of helpful properties and methods are available through Glide instance

Properties

index type: {Number}

• Usage: Holds currently active zero-based slide index.

var glide = new Glide('.glide', { startAt: 1 }).mount()

var i = glide.index // => 1

settings type: {Object}

• Usage: Holds instance initialization settings.

var glide = new Glide('.glide', { startAt: 1 }).mount()

var startAt = glide.settings.startAt // => 1

type type: {String}

• Usage: Holds type of the Glide instance.

var glide = new Glide('.glide').mount()

var type = glide.type // => 'slider'

disabled type: {Boolean}

• Usage: Holds state of the ability to interact.

var glide = new Glide('.glide').mount()

console.log(glide.disabled) // => false

glide.disable()

console.log(glide.disabled) // => true

Methods

mount()

• Usage: A Glide instance is in "uninitialized" mode until a mount() method call. It starts an entire building process.

var glide = new Glide('.glide')

glide.mount()

• Example:

var button = document.querySelector('#api-mount-button')

var glide = new Glide('#api-mount', {
  startAt: 0,
  perView: 3
})

button.addEventListener('click', function () {
  glide.mount()
})

update(settings)

• Arguments:

  • {Object} settings

• Usage: Update settings for the Glide instance.

var glide = new Glide('.glide', { startAt: 0 }).mount()

glide.update({ startAt: 1 })

• Example:

var button = document.querySelector('#api-update-button')

var glide = new Glide('#api-update', {
  startAt: 0,
  perView: 3
})

button.addEventListener('click', function () {
  glide.update({
    type: 'carousel',
    focusAt: 'center',
    startAt: 1,
    perView: 4
  })
})

glide.mount()

destroy()

• Usage: Destroy instance and undo all modifications which have been made to the DOM. It also unbinds added event listeners.

var glide = new Glide('.glide', { startAt: 0 }).mount()

glide.destroy()

• Example:

var button = document.querySelector('#api-destroy-button')

var glide = new Glide('#api-destroy', {
  startAt: 0,
  perView: 3
})

button.addEventListener('click', function () {
  glide.destroy()
})

glide.mount()

on(event, [definition])

• Arguments:

  • {String|Array} event
  • {Function} [definition]

• Usage: Register callback which will be called at the specified events.

var glide = new Glide('.glide')

glide.on('mount.after', function () {
  // Logic fired after mounting
})

glide.mount()

• Example:

var output = document.querySelector('#api-on-output')

var glide = new Glide('#api-on', {
  startAt: 0,
  perView: 3
})

glide.on(['mount.after', 'run'], function () {
  output.innerHTML = glide.index
})

glide.mount()

go(pattern)

• Arguments:

  • {String} pattern

• Usage: Make movement based on the defined pattern. A pattern must be in the special format:

  • > - Move one forward
  • < - Move one backward
  • ={i} - Go to {i} zero-based slide (eq. '=1', will go to second slide)
  • >> - Rewinds to end (last slide)
  • << - Rewinds to start (first slide)

var glide = new Glide('.glide').mount()

glide.go('>')

• Example:

var end = document.querySelector('#api-go-end')
var jump = document.querySelector('#api-go-jump')
var forward = document.querySelector('#api-go-forward')
var backward = document.querySelector('#api-go-backward')
var beginning = document.querySelector('#api-go-beginning')

var glide = new Glide('#api-go', {
  startAt: 0,
  perView: 3
})

forward.addEventListener('click', function () {
  glide.go('>')
})

backward.addEventListener('click', function () {
  glide.go('<')
})

jump.addEventListener('click', function () {
  glide.go('=2')
})

beginning.addEventListener('click', function () {
  glide.go('<<')
})

end.addEventListener('click', function () {
  glide.go('>>')
})

glide.mount()

pause()

• Usage: Stop auto-playing. Hold changing slides after a defined interval.

var glide = new Glide('.glide', { autoplay: 4000 }).mount()

glide.pause()

• Example:

var button = document.querySelector('#api-pause-button')

var glide = new Glide('#api-pause', {
  startAt: 0,
  perView: 3,
  autoplay: 1500
})

button.addEventListener('click', function () {
  glide.pause()
})

glide.mount()

play(force)

• Arguments:

  • {Number} force Force to run auto-playing with passed interval regardless of autoplay settings

• Usage: Start previously stopped auto-playing.

var glide = new Glide('.glide', { autoplay: 4000 }).mount()

glide.pause() // Pausing so we can resume it later

glide.play()

If instance was initialized with disabled autoplay, you can forcefully start it by passing interval number into play() method.

var glide = new Glide('.glide', { autoplay: false }).mount()

glide.play(4000)

• Example:

var button = document.querySelector('#api-play-button')

var glide = new Glide('#api-play', {
  startAt: 0,
  perView: 3,
  autoplay: false
})

button.addEventListener('click', function () {
  glide.play(1500)
})

glide.mount()

disable()

• Usage: Disable instance interaction. Blocks ability to manually change slides via controls or API.

var glide = new Glide('.glide').mount()

glide.disable()

• Example:

var button = document.querySelector('#api-disable-button')

var glide = new Glide('#api-disable', {
  startAt: 0,
  perView: 3
})

button.addEventListener('click', function () {
  glide.disable()
})

glide.mount()

enable()

• Usage: Enable previously disabled instance. Start responding to interaction.

var glide = new Glide('.glide').mount()

glide.enable()

• Example:

var button = document.querySelector('#api-enable-button')

var glide = new Glide('#api-enable', {
  startAt: 0,
  perView: 3
})

glide.disable()

button.addEventListener('click', function () {
  glide.enable()
})

glide.mount()

isType(type)

• Arguments:

  • {String} type

• Usage: Verify the type of a Glide instance.

var slider = new Glide('.glide', { type: 'carousel' }).mount()

slider.isType('slider') // => false
slider.isType('carousel') // => true