jQuery Plugins › jQuery Slider Plugins › Glide.js

Glide.js: Responsive JavaScript Slider & Carousel with CSS3 Transitions

File Size:	68.4 KB
Views Total:	38049
Last Update:	06/05/2026 01:10:00 UTC
Publish Date:	09/02/2013 03:25:08 UTC
Official Website:	Go to website
License:	MIT

Demo Download

Alternatives:

Features:

Lightweight and easy-to-use
Modular and extendable.
Supports of swipe event on touch devices
Arrows, bullets, and Keyboard navigation
Auto play
Pause on hover
CSS3 transitions with fallback to older browsers
Supports almost all the html elements
Cross browser, supports all the modern web / mobile browsers

How to use it:

1. Install & download the library with NPM.

# NPM
$ npm install @glidejs/glide --save

2. Import the Glide.js into your project.

// Core Stylesheet
@import "node_modules/@glidejs/glide/src/assets/sass/glide.core";
// Theme Stylesheet
@import "node_modules/@glidejs/glide/src/assets/sass/glide.theme";

import Glide from '@glidejs/glide'

3. Or directly load the JavaScript and CSS files in the document.

<!-- Local -->
<link rel="stylesheet" href="dist/css/glide.core.min.css">
<link rel="stylesheet" href="dist/css/glide.theme.min.css">
<script src="dist/glide.min.js"></script>

<!-- CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@glidejs/glide@latest/dist/css/glide.core.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@glidejs/glide@latest/dist/css/glide.theme.min.css">
<script src="https://cdn.jsdelivr.net/npm/@glidejs/glide@latest/dist/glide.min.js"></script>

4. Create the html for the slides, pagination bullets and navigation arrows.

<div class="glide">
  <!-- Slides here -->
  <div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
      <li class="glide__slide">Slide 1</li>
      <li class="glide__slide">Slide 2</li>
      <li class="glide__slide">Slide 3</li>
    </ul>
  </div>
  <!-- Navigation -->
  <div class="glide__arrows" data-glide-el="controls">
    <button class="glide__arrow glide__arrow--left" data-glide-dir="<">prev</button>
    <button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
  </div>
  <!-- Pagination -->
  <div class="glide__bullets" data-glide-el="controls[nav]">
    <button class="glide__bullet" data-glide-dir="=0"></button>
    <button class="glide__bullet" data-glide-dir="=1"></button>
    <button class="glide__bullet" data-glide-dir="=2"></button>
  </div>
</div>

5. Create custom controls for the slider (OPTIONAL).

<div data-glide-el="controls">
  <button data-glide-dir="<">Previous</button>
  <button data-glide-dir=">">Next</button>
  <button data-glide-dir="<<">First</button>
  <button data-glide-dir=">>">Last</button>
  <button data-glide-dir="=1">Goto The Slide 2</button>
</div>

6. Initialize the Glide.js with default settings. That's it.

new Glide('.glide').mount();

7. Possible options to customize the slider.

new Glide('.glide', {

    // Auto change slides after specifed interval.
    autoplay: 4000,

    // Slider type. 
    // carousel, slider or slideshow.
    type: 'carousel',

    // Start slider at specifed slide number.
    startAt: 1,

    // Pause autoplay on mouseover the slider.
    hoverpause: true,

    // Change slide on left/right keyboard arrow press.
    keyboard: true,

    // The number of slides to show per screen
    perView: 1,

    // 'center' or 1,2,3...
    focusAt: 0,

    // Space between slides
    gap: 10,

    // Stop running perView number of slides from the end
    bound: false,

    // Minimal touch-swipe distance to need to change slide. 
    // False for turning off touch.
    swipeThreshold: 80,

    // Maximum number of slides moved per single swipe or drag
    perTouch: false,

    // Alternate moving distance ratio of swiping and dragging
    touchRatio: .5,

    // Angle required to activate slides moving
    touchAngle: 45,

    // Minimal drag distance to need to change slide. 
    // False for turning off drag.
    dragThreshold: 120,

    // Animation duration in ms.
    animationDuration: 400,

    // Animation easing CSS function.
    animationTimingFunc: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)',

    // Call the resize events at most once per every wait in milliseconds.
    throttle: 16,

    // Enable infinite loop on slider type
    rewind: true,

    // Duration of the rewinding animation
    rewindDuration: 800,

    // 'ltr' or 'rtl'
    direction: 

    // The value of the future viewports which have to be visible in the current view
    // e.g. 100 or { before: 100, after: 50 }
    peek: 0,

    // Options applied at specified media breakpoints
    breakpoints: {},

    // Default CSS classes
    classes: {
      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'
    }
    
})

8. Properties & API methods.

// the current slide index
glide.index

// get the option value
glide.settings.OptName

// get the slider type
glide.type

// get the slider status
glide.disabled

// enable the slider
glide.mount();

// update the option
glide.update({ options here });

// play the slider
glide.play();

// pause the slider
glide.pause();

// enable the slider
glide.enable();

// disable the slider
glide.disable();

// destroy the slider
glide.destroy();

// go to the next slide
// see more in the controls section
glide.go('>');

// check the slider type
glide.isType('slider');
glide.isType('carousel');

9. Event handlers.

glide.on('mount.before', function() {
  // befoure mount
})

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

glide.on('update', function() {
  // after the settings changed
})

glide.on('play', function() {
  // when playing
})

glide.on('pause', function() {
  // when paused
})

glide.on('build.before', function() {
  // before setting up a slider to its initial state
})

glide.on('build.bafter', function() {
  // after setting up a slider to its initial state
})

glide.on('run.before', function(move) {
  // before running
})

glide.on('run', function(move) {
  // when running
})

glide.on('run.after', function(move) {
  // after running
})

glide.on('run.offset', function(move) {
  // after calculating new index and making a transition
})

glide.on('run.start', function(move) {
  // after calculating the new index, but before making a transition
})

glide.on('run.end', function(move) {
  // after calculating the new index, but before making a transition
})

glide.on('move', function(movement) {
  // on move
})

glide.on('move.after', function(movement) {
  // after moving
})

glide.on('resize', function() {
  // on window resize
})

glide.on('swipe.start', function() {
  // swipe.start
})

glide.on('swipe.move', function() {
  // swipe.move
})

glide.on('swipe.end', function() {
  // swipe.end
})

glide.on('translate.jump', function(movement) {
  // before a translate applies
})

Changelog:

v3.7.1 (2024-11-23)

Update

v3.7.0 (2024-11-21)

Update

v3.6.2 (2024-07-04)

Update

v3.6.1 (2023-09-18)

refactor: move to const variables and simplify conditionals
bugfix

v3.6.0 (2022-09-27)

feat: add toArray function to convert NodeList to Array
remove deprecated event.keyCode and replace with event.code
Add package.json "type" field

v3.5.2 (2021-11-29)

build: Don't ignore dist/ folder on NPM, so it is available after installing a package

v3.5.1 (2021-11-23)

Bugfix

v3.5.0 (2021-11-22)

new cloningRation option

v3.4.0 (2019-09-20)

new cloningRation option

v3.3.0 (2019-08-21)

Update

2017-01-22

Fixes problems with default events from anchors and images

2016-08-07

Stop sliding when only having 1 image

2016-06-05

[hotfix] Resize still fires after calling destroy

2016-03-17

v2.0.7

2016-02-05

Block multiple scrolling direction on mobile

2015-12-21

Fix z-index on bullets

2015-11-08

Fixed Slides not swiping on mobiles

2015-11-06

v2.0.5

2015-08-22

Bullets live event binding

2015-08-12

Add missing namespace to resize.

2015-07-29

Paddings option handle %, px, number values
Fixing touch freezing; Performance fixes

2015-07-22

v2.0.3

2015-07-13

Swipe option callbacks
Triggers can handle multiple targets
Paddings option origin

2015-07-07

fixed for destroy method.

2015-06-13

Touch module various fixes

2015-06-06

Prevent anchor clicks while dragging

2015-06-03

Touch module fixes

2015-05-24

fixes triggers binded multiple times

2015-05-15

Added autoheight option

2015-05-04

Fix some bugs and improve type "slider"

2015-04-30

Touch module fixes and optimizations

2015-04-23

v2.0.0

2014-11-25

Single slide bug fix
Added Bower support

2014-07-12

Update to v1.0.65

2014-02-26

Fix for older browser fallback

2014-02-21

Fix for multiple sliders & events handlers refined

2014-02-20

Fix for play/pause on hover event

2014-02-11

fixed afterTransition callback.

2014-02-02

Code refactoring. More readable, modular, scalar.
Added circular slides changing
Rename navigation options, make sure to update.
Refined animation options. Now setted via plugin options. There is no longer need to set transition inside css file.
New api method .reinit(). Rebuild and recalculate dimensions of slider elements.

2013-12-11

Extend options & bug fixes

2013-12-06

Little fixes: syntax, cleaning

v1.0.4 (2013-11-04)

Refined swipe event
Opera 12 supported.

This awesome jQuery plugin is developed by glidejs. For more Advanced Usages, please check the demo page or visit the official website.