glide-js-multiple-sliders

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

by

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
$ 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>
    </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 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>
</div>

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'
    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. API properties and 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
})

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

See Demo And Download

Demo
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