Responsive Slider Plugin with CSS3 Transitions - Glide.js

File Size: 200 KB
Views Total: 35506
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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:

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