JS Tutorial
Download
Demo
- Overview
- Documents
User Rating: 2.8/5 ( 1 votes)
Your Rating:
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.
It works on smartphones, tablets and desktops.
Source: jedrzejchalubek.com
1. INCLUDE JS AND CSS FILES
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="jquery.glide.js"></script> <link rel="stylesheet" href="css/style.css">
2. HTML
<div class="slider">
<ul class="slides">
<li class="slide"></li>
<li class="slide"></li>
<li class="slide"></li>
</ul>
</div>
3. JAVASCRIPT
$('.slider').glide({
autoplay: 5000,
arrows: 'body',
navigation: 'body'
});
4. OPTIONS
| 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) |
| 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 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 |
| 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 |
5. 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')
