Glide.js: A JavaScript repository from jianbinhusky

Glide.js is responsive and touch-friendly jQuery slider. Based on CSS3 transitions with fallback to older browsers. 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="slider__wrapper">
    <li class="slider__item"></li>
    <li class="slider__item"></li>
    <li class="slider__item"></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',
		navigation: '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	Circular play (Animation continues without starting over once it reaches the last slide)
`transitionType`	`slide`	string	Set the transition type. You can choose between "slide" and "fade"
`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__arrows-item`	string	Main class for both arrows
`arrowRightClass`	`slider__arrows-item--right`	string	Right arrow class
`arrowLeftClass`	`slider__arrows-item--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 bullets to slider wrapper. False for not appending bullets. 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
`sliderCurrentItemClass`	`slider__item--current`	string	Current slider 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.
`forceJS`	`false`	bool	Use JS animation ( $.animate() ) instead of CSS transition and transform.
`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
.destroy() - Destroy and cleanup slider
.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.7 / 04.01.2015

Add new transition type - fade
Add class to current slider item
Add option to force animation in JavaScript

1.0.6 / 25.11.2014

Bower support

1.0.6 / 12.07.2014

Sass styles redefined. New naming convection.
Added destroy() method.

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

jianbinhusky/Glide.js