Responsive Slider Plugin with CSS3 Transitions - Glide.js

Glide.js is a lightweight, flexible jQuery slider/carousel plugin (ES6 JavaScript slider/carousel library) that helps you create responsive and touch-enabled sliders with fast and performant CSS3 transitions.

See also:

• 10 Best Carousel Plugins In jQuery/JavaScript/CSS

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.