Responsive jQuery Slider Plugin with CSS3 Transitions - Glide.js

Responsive jQuery Slider Plugin with CSS3 Transitions - Glide.js
File Size: 106 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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

Features:

  • Lightweight and easy-to-use
  • Supports of swipe event on touch devices
  • Arrows, bullets, and Keyboard navigation
  • Auto play
  • Pause on hover
  • CSS3 transitions with fallback to older broswers. 
  • Supports almost all the html elements
  • Cross browser, supports all the modern web / mobile browsers

How to use it:

1. Include jQuery library and jquery.glide.js script on the web page

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.glide.js"></script>

2. Create the html for the slider

<div id="Glide" class="glide">

  <div class="glide__arrows">
    <span class="glide__arrow prev" data-glide-dir="<">prev</span>
    <span class="glide__arrow next" data-glide-dir=">">next</span>
  </div>

  <ul class="glide__wrapper">
    <li class="glide__slide">
      <div class="box" style="background-color: red;"></div>
    </li>
    <li class="glide__slide">
      <div class="box" style="background-color: blue;"></div>
    </li>
    <li class="glide__slide">
      <div class="box" style="background-color: purple;"></div>
    </li>
  </ul>

  <ul class="glide__bullets"></ul>

</div>

3. The CSS

.glide {
  position: relative;
  width: 100%;
  height: 280px;
  overflow: hidden;
}

.glide__wrapper {
  width: 100%;
  height: 100%;
  list-style: none;
  -webkit-perspective: 1000;
  perspective: 1000;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: absolute;
  top: 0;
  left: 0;
}

.glide__wrapper.dragging {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.glide__slide {
  -webkit-perspective: 1000;
  perspective: 1000;
  width: 100%;
  height: 100%;
}

.glide__arrows {
  position: absolute;
  top: 50%;
  width: 100%;
}

.glide__arrow {
  position: absolute;
  top: 0;
  z-index: 2;
  padding: 18px;
  background: gray;
  cursor: pointer;
}

.glide__arrow.prev { left: 0; }

.glide__arrow.next { right: 0; }

.glide__bullets {
  position: absolute;
  bottom: 18px;
  width: 100%;
  text-align: center;
  list-style: none;
}

.glide__bullets li {
  display: inline-block;
  background-color: gray;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  cursor: pointer;
}

.glide__bullets li.active { background-color: white; }

.glide--slider .glide__slide {
  float: left;
  clear: none;
}

.glide--slider .glide__arrow {
  -webkit-transition: visibility 0 ease 150ms,  opacity 150ms ease;
  transition: visibility 0 ease 150ms,  opacity 150ms ease;
}

.glide--slider .glide__arrow.prev {
  opacity: 0;
  visibility: hidden;
}

.glide--carousel .glide__slide {
  float: left;
  clear: none;
}

.glide--slideshow .glide__slide {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.glide--slideshow .glide__slide.active { z-index: 1; }

4. Call the plugin

var slider = $('#Glide').glide();
var slider_api = slider.data('glide_api');

5. Options

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

// Minimal touch-swipe distance to needed to change slide. 
//  False for turning off touch.
touchDistance: 80,

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

// auto height
autoheight: false,

// List of DOM classes.
classes: {
  base: 'glide',
  wrapper: 'glide__wrapper',
  slide: 'glide__slide',
  track: 'glide__track',
  arrows: 'glide__arrows',
  arrow: 'glide__arrow',
  arrowNext: 'next',
  arrowPrev: 'prev',
  bullets: 'glide__bullets',
  bullet: 'glide__bullet',
  active: 'active',
  dragging: 'dragging',
  disabled: 'disabled'
},

// Callback functions
beforeInit: function(el) {},
afterInit: function(el) {},
beforeTransition: function(i, el) {},
afterTransition: function(i, el) {},
swipeStart: function(i, el) {},
swipeEnd: function(i, el) {},

Change logs:

v3.0,0 (2018-04-04)

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.