Intro

Touch-friendly jQuery carousel slider. Designed to slide. No less, no more. It's simple, responsive and fast.

Tested in IE10+, Chrome, Firefox, Opera, Safari.



prev next
1
2
3

Installation

Bower

This is the best way. Easy to fetch, easy to update.

bower install glidejs

Github

Clone the repo and pick up what you need.

git clone https://github.com/jedrzejchalubek/Glide.js.git

Manually

Download .zip package

Setup

Include plugin stylesheets. There are two files.
glide.core.css
contains essential styling for the proper functioning. In most cases you don't need to change anything in there.
glide.theme.css
contains visual look of slider. Adjust it to for your projects.

<link rel="stylesheet" href="css/glide.core.css">
    <link rel="stylesheet" href="css/glide.theme.css">

Make necessary markup for slider. If you don't want arrows or bullets, just remove proper markup. That's all, you don't need to do anything else.

Make sure that classes name match given in classes option

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

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

    <div class="glide__wrapper">
        <ul class="glide__track">
            <li class="glide__slide"></li>
            <li class="glide__slide"></li>
            <li class="glide__slide"></li>
        </ul>
    </div>

    <div class="glide__bullets"></div>

</div>

Include plugin and dependeces. jQuery is the only dependency, make sure to include it.

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

Let it happen :) Init plugin with choosen options.

<script>
    $("#Glide").glide({
        type: "carousel"
    });
</script>

Options

type

@default:
carousel

@type:
String


Slider type. Available types:

  • slider: rewinds slider to once reaches the last slide
  • carousel: change slides without starting over once slider reaches the last slide
  • slideshow: change slides with fadeIn

mode

@default:
horizontal

@type:
String


Slider moving mode. Available modes:

  • horizontal: move on X axis
  • vertical: move on Y axis
It has no effect when type is slideshow

autoplay

@default:
4000

@type:
Number


Auto change slides after specifed interval. False for turning off autoplay.


startAt

@default:
1

@type:
Number


Start slider at specifed slide number.


paddings

@default:
0

@type:
Number, String


Left and right padding on current view. Neighbours of current slide are visible. Can be number, percentage or pixels.

It has no effect when type is slideshow

centered

@default:
true

@type:
Boolean


Current slide always in center of track.

It has no effect when type is slideshow

hoverpause

@default:
true

@type:
Boolean


Pause autoplay on mouseover the slider.


autoheight

@default:
false

@type:
Boolean


Setup slider height based on current slide content.


keyboard

@default:
true

@type:
Boolean


Change slide on left/right keyboard arrow press.


touchDistance

@default:
80

@type:
Number


Minimal touch-swipe distance needed to change slide. False for turning off touch.


dragDistance

@default:
120

@type:
Number


Minimal mouse drag distance needed to change slide. False for turning off mouse drag.


animationDuration

@default:
400

@type:
Number


Animation duration in ms.


animationTimingFunc

@default:
cubic-bezier(0.165, 0.840, 0.440, 1.000)

@type:
String


Animation easing CSS function.


throttle

@default:
16

@type:
Number


Call the resize events at most once per every wait in milliseconds.


classes

@default:
[object Object]

@type:
Object


List of DOM classes.

  • base: glide
  • wrapper: glide__wrapper
  • track: glide__track
  • slide: glide__slide
  • arrows: glide__arrows
  • arrow: glide__arrow
  • arrowNext: next
  • arrowPrev: prev
  • bullets: glide__bullets
  • bullet: glide__bullet
  • clone: clone
  • active: active
  • dragging: dragging
  • disabled: disabled

beforeInit

@default:
function(event) {}

@type:
Function


Callback that fires before slider init. Slider base element is passed to the function.


afterInit

@default:
function(event) {}

@type:
Function


Callback that fires after slider init. Event data is passed as parameter.


afterTransition

@default:
function(event) {}

@type:
Function


Callback that fires after transition. Event data is passed as parameter.


beforeTransition

@default:
function(event) {}

@type:
Function


Callback that fires before transition. Event data is passed as parameter.


swipeStart

@default:
function(event) {}

@type:
Function


Callback that fires on start of touch/drag. Event data is passed as parameter.


swipeEnd

@default:
function(event) {}

@type:
Function


Callback that fires on end of touch/drag. Event data is passed as parameter.


swipeMove

@default:
function(event) {}

@type:
Function


Callback that fires on end of touch/drag. Event data is passed as parameter.

Event data

Event data is passed to each event. For example:

slider.on("swipeMove.glide", function(event, data) {
    // Access to event data
    console.log('event: swipeEnd', data);
});

Event data is passed to each callback. For example:

swipeMove: function(event) {
    // Access to event data
    console.log(event);
}

{
    // Active slide index
    index: [Number],
    // Slides count
    length: [Number],
    // Current slide jQuery object
    current: [Object],
    // Slider jQuery object
    slider: [Object],
    // Swipe data
    swipe: {
        // Swipe distance
        distance: [Number]
    }
}

API

.current()

@return:
Number


Returning current slide number.


.go(direction)

@param:
String direction


Makinkg run with animation in specifed direction. Direction param must be in special pattern:

  • > - move one forward
  • < - move one backward
  • ={i} - go to {i} slide (eq. '=3', will go to third slide)
  • >> - rewinds to end (last slide)
  • << - rewinds to start (first slide)

.jump(direction)

@param:
String direction


Makinkg run without animation in specifed direction. Direction param must be in special pattern:

  • > - move one forward
  • < - move one backward
  • ={i} - go to {i} slide (eq. '=3', will go to third slide)
  • >> - rewinds to end (last slide)
  • << - rewinds to start (first slide)

.start(interval)

@param:
Number interval

@return:
Number


Start autoplay with specifed interval. Returning current autoplay interval.


.pause()

@return:
Number


Pause autoplay. Returning current autoplay interval.


.play()

@return:
Number


Play autoplay. Returning current autoplay interval.


.refresh()

Refresh slider. Recalculate and rebuild slider.


.destroy()

Destroy slider. Clear objects and bindings.

Attributes

data-glide-dir

This attribute holds trigger direction. Direction param must be in special pattern:

  • > - move one forward
  • < - move one backward
  • ={i} - go to {i} slide (eq. '=3', will go to third slide)
  • >> - rewinds to end (last slide)
  • << - rewinds to start (first slide)

data-glide-trigger

Custom change slide trigger. It must by paried with data-glide-dir attr. With it you can create a custom external navigations.

The value of this attribute must point to slider id.

<a href='#' data-glide-trigger='#Glide' data-glide-dir='=3'>Go to third slide</a>

Multiple trigger targets are supported too.

data-glide-trigger='#Carousel #Slider'

data-glide-autoplay

Set diffrent autoplay time for each slide separately.

The value of this attribute must be number (time in ms).

<li class='glide__slide' data-glide-autoplay='6000'></li>

License

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