Responsive Slider Plugin with CSS3 Transitions – Glide.js

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

See additionally:

Options:

• Light-weight and easy-to-use
• Modular and extendable.
• Helps of swipe occasion on contact gadgets
• Arrows, bullets, and Keyboard navigation
• Auto play
• Pause on hover
• CSS3 transitions with fallback to older browsers
• Helps nearly all of the html components
• Cross browser, helps all the trendy internet / cell browsers

How one can use it:

1. Set up & obtain the library with NPM.

# NPM
$ npm set up @glidejs/glide --save

2. Import the Glide.js into your venture.

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

import Glide from '@glidejs/glide'

3. Or immediately load the JavaScript and CSS recordsdata within the doc.

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

<!-- CDN -->
<hyperlink rel="stylesheet" href="https://cdn.jsdelivr.internet/npm/@glidejs/[email protected]/dist/css/glide.core.min.css">
<hyperlink rel="stylesheet" href="https://cdn.jsdelivr.internet/npm/@glidejs/[email protected]/dist/css/glide.theme.min.css">
<script src="https://cdn.jsdelivr.internet/npm/@glidejs/[email protected]/dist/glide.min.js"></script>

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

<div class="glide">
  <!-- Slides right here -->
  <div class="glide__track" data-glide-el="observe">
    <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=">">subsequent</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 customized controls for the slider (OPTIONAL).

<div data-glide-el="controls">
  <button data-glide-dir="<">Earlier</button>
  <button data-glide-dir=">">Subsequent</button>
  <button data-glide-dir="<<">First</button>
  <button data-glide-dir=">>">Final</button>
  <button data-glide-dir="=1">Goto The Slide 2</button>
</div>

6. Initialize the Glide.js with default settings. That is it.

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

7. Potential choices to customise the slider.

new Glide('.glide', {

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

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

    // Begin slider at specifed slide quantity.
    startAt: 1,

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

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

    // The variety of slides to point out per display screen
    perView: 1,

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

    // House between slides
    hole: 10,

    // Cease working perView variety of slides from the top
    certain: false,

    // Minimal touch-swipe distance to want to vary slide. 
    // False for turning off contact.
    swipeThreshold: 80,

    // Most variety of slides moved per single swipe or drag
    perTouch: false,

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

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

    // Minimal drag distance to want to vary slide. 
    // False for turning off drag.
    dragThreshold: 120,

    // Animation length in ms.
    animationDuration: 400,

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

    // Name the resize occasions at most as soon as per each wait in milliseconds.
    throttle: 16,

    // Allow infinite loop on slider kind
    rewind: true,

    // Period of the rewinding animation
    rewindDuration: 800,

    // 'ltr' or 'rtl'
    route: 

    // The worth of the long run viewports which should be seen within the present view
    // e.g. 100 or { earlier than: 100, after: 50 }
    peek: 0,

    // Choices utilized at specified media breakpoints
    breakpoints: {},

    // Default CSS courses
    courses: {
      route: {
        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 strategies.

// the present slide index
glide.index

// get the choice worth
glide.settings.OptName

// get the slider kind
glide.kind

// get the slider standing
glide.disabled

// allow the slider
glide.mount();

// update the choice
glide.replace({ choices right here });

// play the slider
glide.play();

// pause the slider
glide.pause();

// allow the slider
glide.allow();

// disable the slider
glide.disable();

// destroy the slider
glide.destroy();

// go to the subsequent slide
// see extra within the controls part
glide.go('>');

// examine the slider kind
glide.isType('slider');
glide.isType('carousel');

9. Occasion handlers.

glide.on('mount.earlier than', perform() {
  // befoure mount
})

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

glide.on('replace', perform() {
  // after the settings modified
})

glide.on('play', perform() {
  // when enjoying
})

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

glide.on('construct.earlier than', perform() {
  // earlier than establishing a slider to its preliminary state
})

glide.on('construct.bafter', perform() {
  // after establishing a slider to its preliminary state
})

glide.on('run.earlier than', perform(transfer) {
  // earlier than working
})

glide.on('run', perform(transfer) {
  // when working
})

glide.on('run.after', perform(transfer) {
  // after working
})

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

glide.on('run.begin', perform(transfer) {
  // after calculating the brand new index, however earlier than making a transition
})

glide.on('run.finish', perform(transfer) {
  // after calculating the brand new index, however earlier than making a transition
})

glide.on('transfer', perform(motion) {
  // on transfer
})

glide.on('transfer.after', perform(motion) {
  // after transferring
})

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

glide.on('swipe.begin', perform() {
  // swipe.begin
})

glide.on('swipe.transfer', perform() {
  // swipe.transfer
})

glide.on('swipe.finish', perform() {
  // swipe.finish
})

glide.on('translate.leap', perform(motion) {
  // earlier than a translate applies
})

Changelog:

v3.6.0 (2022-09-23)

• feat: add toArray perform to transform NodeList to Array
• take away deprecated occasion.keyCode and exchange with occasion.code

v3.5.2 (2021-11-29)

• construct: Do not ignore dist/ folder on NPM, so it’s out there after putting in a bundle

v3.5.1 (2021-11-23)

v3.5.0 (2021-11-22)

v3.4.0 (2019-09-20)

v3.3.0 (2019-08-21)

2017-01-22

• Fixes issues with default occasions from anchors and pictures

2016-08-07

• Cease sliding when solely having 1 picture

2016-06-05

• [hotfix] Resize nonetheless fires after calling destroy

2016-03-17

2016-02-05

• Block a number of scrolling route on cell

2015-12-21

2015-11-08

• Mounted Slides not swiping on mobiles 

2015-11-06

2015-08-22

• Bullets dwell occasion binding

2015-08-12

• Add lacking namespace to resize.

2015-07-29

• Paddings choice deal with %, px, quantity values
• Fixing contact freezing; Efficiency fixes

2015-07-22

2015-07-13

• Swipe choice callbacks
• Triggers can deal with a number of targets
• Paddings choice origin

2015-07-07

• fastened for destroy technique.

2015-06-13

• Contact module numerous fixes

2015-06-06

• Forestall anchor clicks whereas dragging

2015-06-03

2015-05-24

• fixes triggers binded a number of instances

2015-05-15

2015-05-04

• Repair some bugs and enhance kind “slider”

2015-04-30

• Contact module fixes and optimizations

2015-04-23

2014-11-25

• Single slide bug repair
• Added Bower help

2014-07-12

2014-02-26

• Repair for older browser fallback

2014-02-21

• Repair for a number of sliders & occasions handlers refined

2014-02-20

• Repair for play/pause on hover occasion

2014-02-11

• fastened afterTransition callback.

2014-02-02

• Code refactoring. Extra readable, modular, scalar.
• Added round slides altering
• Rename navigation choices, be sure to replace.
• Refined animation choices. Now setted through plugin choices. There is no such thing as a longer have to set transition inside css file.
• New api technique .reinit(). Rebuild and recalculate dimensions of slider components.

2013-12-11

• Prolong choices & bug fixes

2013-12-06

• Little fixes: syntax, cleansing

v1.0.4 (2013-11-04)

• Refined swipe occasion
• Opera 12 supported.

This superior jQuery plugin is developed by glidejs. For extra Superior Usages, please examine the demo web page or go to the official web site.