/Glide.js

Glide is responsive and touch-friendly jQuery slider. Based on CSS3 transitions with fallback to older broswers. It's simple, lightweight and fast. Designed to slide, no less, no more.

Primary LanguageJavaScript

#glide.js

Glide.js is responsive and touch-friendly jQuery slider. Based on CSS3 transitions with fallback to older broswers. It's simple, lightweight and fast. Designed to slide, no less, no more.

##Setup

###1. Include jQuery jQuery is the only dependency. Make sure to include it.

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

###2. Include Glide.js

<script src="jquery.glide.js"></script>

###3. Make necessary markup Link to slider stylesheet inside document head.

<link rel="stylesheet" href="css/style.css">

Make necessary markup for slider.

<div class="slider">
  <ul class="slides">
    <li class="slide"></li>
    <li class="slide"></li>
    <li class="slide"></li>
  </ul>
</div>

###4. Init Init our slider on default options ...

<script>
	$('.slider').glide();
</script>

… or with custom options

<script>
	$('.slider').glide({
		autoplay: 5000,
		arrows: 'body',
		nav: 'body'
	});
</script>

##Options Here is list of all available

Option Default Type Description
autoplay 4000 int/bool False for turning off autoplay
hoverpause true bool Pause autoplay on mouseover slider
circular true bool Circual play
animationDuration 500 int Animation time in ms
animationTimingFunc cubic-bezier(0.165, 0.840, 0.440, 1.000) string Animation easing function
arrows true bool/string Show/hide/appendTo arrows. True for append arrows to slider wrapper. False for not appending arrows. Id or class name (e.g. '.class-name') for appending to specific HTML markup
arrowsWrapperClass slider-arrows string Arrows wrapper class
arrowMainClass slider-arrow string Main class for both arrows
arrowRightClass slider-arrow--right string Right arrow class
arrowLeftClass slider-arrow--left string Left arrow class
arrowRightText next string Right arrow text
arrowLeftText prev string Left arrow text
navigation true bool/string Show/hide/appendTo bullets navigation. True for append arrows to slider wrapper. False for not appending arrows. Id or class name (e.g. '.class-name') for appending to specific HTML markup.
navigationCenter true bool Center bullet navigation
navigationClass slider-nav string Navigation wrapper class
navigationItemClass slider-nav__item string Navigation item class
navigationCurrentItemClass slider-nav__item--current string Current navigation item class
keyboard true bool Slide on left/right keyboard arrows press
touchDistance 60 int/bool Minimal touch-swipe distance to call event. False for turning off touch.
beforeInit function(){} function Callback before plugin init
afterInit function(){} function Callback after plugin init
beforeTransition function(){} function Callback before slide change
afterTransition function(){} function Callback after slide change

##API

Make glide api instance.

var glide = $('.slider').glide().data('api_glide');

Now, you can use API as bellow.

glide.jump(3, console.log('Wooo!'));
  • .current() - Returning current slide number
  • .reinit() - Rebuild and recalculate dimensions of slider elements
  • .play() - Starting autoplay
  • .pause() - Stopping autoplay
  • .next(callback) - Slide one forward
  • .prev(callback) - Slide one backward
  • .jump(distance, callback) - Jump to current slide
  • .nav(target) - Append navigation to specifed target (eq. 'body', '.class', '#id')
  • .arrows(target) - Append arrows to specifed target (eq. 'body', '.class', '#id')

##Changelog 1.0.6 / 01.02.2014

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

1.0.5 / 25.11.2013

  • Added after and before transition callbacks
  • Added after and before init callbacks
  • Added hoverpause and keyboard options

1.0.4 / 17.09.2013

  • Refined swipe event

1.0.3 / 15.09.2013

  • Code refactoring

1.0.2 / 04.09.2013

  • Translate3d slides change (thanks to OwlFonk for suggestion)
  • Extend API, getter for current slide number

1.0.1 / 22.08.2013

  • Modularize code
  • Some options changes
  • Extend API, manually appending navigation and arrows with specifed target

1.0.0 / 19.08.2013

  • Plugin release

##License Glide is Copyright © 2013 Jędrzej Chałubek and is licensed under the terms of the MIT License.