dsmwebdesigner / glide.js Goto Github PK

#

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

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