[Glide] A Lightweight, Flexible and Fast JavaScript ES6 Slider and Carousel Plugin

Glide.js is a dependency-free ES6 slider and javascript. It is lightweight, flexible, and fast. Designed to slip. No less, no more.

responsive slider jquery free download with demo, jquery carousel slider example, responsive image slider with text, responsive automatic image slider in html glide js examples

What can convince you:

  • Free of dependency. Everything included, ready to go.
  • Lightweight. Only ~23KB (~7KB gzip) with all functionality built-in.
  • Normative. Remove unused units and drop script weight more.
  • Extendable. Connect your units with additional functions.
  • Bundlers are ready. Using Rollup or Webpack? We support you.

Build using NPM scripts. The following texts are available:

  • build: css – output CSS files from SASS files.
  • build: js – Output all destination variables for the script.
  • build – builds the entire library comprehensively.
  • test – Runs a complete test suite.
  • lint – lints library javascript files.

How to make use of it:

1. Install and download the library using NPM.

$ npm install @glidejs/glide --save

2. Import 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 load the JavaScript and CSS files directly into 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. Generate HTML for slides, 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>
  <!-- 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>
  <!-- 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>

5. Create custom slider controls.

<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>

6. Configure Glide.js with default settings.

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

7. Possible options to customize the scroll bar.

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'

    // 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. API properties and methods.

// the current slide index

// get the option value

// get the slider type

// get the slider status

// enable the slider

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

// play the slider

// pause the slider

// enable the slider

// disable the slider

// destroy the slider

// go to the next slide
// see more in the controls section

// check the slider type

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

Responsive Slider Plugin with CSS3 Transitions, glide Plugin/Github, jquery glider slider, glide js multiple sliders, glide js demo

See Demo And Download

Official Website(glidejs): Click Here

This superior jQuery/javascript plugin is developed by glidejs. For extra Advanced Usages, please go to the official website.

Leave a Comment