Skip to content

options.md

Latest commit

 

History

History
313 lines (193 loc) · 7.03 KB

options.md

File metadata and controls

313 lines (193 loc) · 7.03 KB
title Options
layout docs.html
slug options
priority 6
algolia true

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

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

[[example dir=options/type]]

startAt

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

default: 0 type: Number

[[example dir=options/start-at]]

perView

A number of slides visible on the single viewport.

default: 1 type: Number

[[example dir=options/per-view]]

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

[[example dir=options/focus-at]]

gap

A size of the gap added between slides.

default: 10 type: Number

[[example dir=options/gap]]

autoplay

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

default: false type: Number|Boolean

[[example dir=options/autoplay]]

hoverpause

Stop autoplay on mouseover event.

default: true type: Boolean

[[example dir=options/hoverpause]]

keyboard

Allow for changing slides with left and right keyboard arrows.

default: true type: Boolean

[[example dir=options/keyboard]]

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

[[example dir=options/bound]]

swipeThreshold

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

default: 80 type: Number|Boolean

[[example dir=options/swipe-threshold]]

dragThreshold

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

default: 120 type: Number|Boolean

[[example dir=options/drag-threshold]]

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

[[example dir=options/per-touch]]

touchRatio

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

default: 0.5 type: Number

[[example dir=options/touch-ratio]]

touchAngle

Angle required to activate slides moving on swiping or dragging.

default: 45 type: Number

[[example dir=options/touch-angle]]

animationDuration

Duration of the animation in milliseconds.

default: 400 type: Number

[[example dir=options/animation-duration]]

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

[[example dir=options/rewind]]

rewindDuration

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

default: 800 type: Number

[[example dir=options/rewind-duration]]

animationTimingFunc

Easing function for the animation.

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

[[example dir=options/animation-timing-func]]

direction

Moving direction mode. Available inputs:

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

default: 'ltr' type: String

[[example dir=options/direction]]

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

[[example dir=options/peek]]

breakpoints

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

{
  800: {
    perView: 2
  }
}

default: {} type: Object

[[example dir=options/breakpoints]]

classes

Collection of internally used HTML classes. Default values:

type: Object

{
  swipeable: 'glide--swipeable',
  dragging: 'glide--dragging',
  direction: {
    ltr: 'glide--ltr',
    rtl: 'glide--rtl'
  },
  type: {
    slider: 'glide--slider',
    carousel: 'glide--carousel'
  },
  slide: {
    clone: 'glide__slide--clone',
    active: 'glide__slide--active'
  },
  arrow: {
    disabled: 'glide__arrow--disabled'
  },
  nav: {
    active: 'glide__bullet--active'
  }
}

throttle

Throttle costly events at most once per every wait milliseconds.

default: 25 type: Number