vue-glide-js

# 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:** `{}`