▍▍

Summary

Glide.js is a simple, lightweight, multi-oriented, multi-directional jQuery carousel. It is accessable by developers of all skill levels to integrate this straight-foward, yet powerful, slider in their project. Out of the box, Glide.js comes with a large set of options that can be used to create any slider you can imagine!

Development continues to add features and fix bugs in Glide.js. If you're experiencing a bug, tell us about it here!

Glide.js is compatible with all modern browsers and jQuery version 1.4+

Downloads

Standard Version	Includes development version (29.0kb) and minified, production version (9.43kb).
Full Version	Includes development and minified versions, as well as 5 examples (about 4.5mb total download).

How?

Glide.js couldn't be easier to integrate into your website. Here's a short sample of how to use Glide.js.


  <!doctype html>
  <html>
  <head>
    <link rel="stylesheet" type="text/css" href="glide.css" />
    <style type="text/css">

      #slider
      {
        width: 900px;
        height: 400px;
      }

      .slider_container
      {
        width: 100%;
        height: inherit;
        display: block;
      }

    </style>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript" src="glide.js"></script>
  </head>
  <body>
      <div id="slider">
        <div class="slider_container">
          <div>
            <img src="imgs/1.jpg"/>
          </div>
          <div>
            <img src="imgs/2.jpg"/>
          </div>
          <div>
            <img src="imgs/3.jpg"/>
          </div>
        </div>
      </div>
      <script type="text/javascript">
        $('#slider').glide();
      </script>
  </body>
  </html>

Examples

There are tons of awesome options that come built into Glide.js. Here are some examples of what you can do:

Docs

Options

preload - boolean

When set, the slider will preload images before starting.

Default: false

preloadImage - string

Relative path to the image that displays while slides are being loaded.

Default: 'imgs/loading.gif'

nextPrevLinks - boolean

Generate next and previous button links.

Default: false

pagination - boolean

Generate pagination links (one per slide).

Default: true

paginationStyle - string

Shape to display pagination links as. Leave blank for none.

Accepted values: 'circle', 'square', 'diamond'.

Default: 'circle'

paginationPosition - string

Position to display pagination links.

Accepted Values: 'left', 'center', 'right'.

Default: 'center'

orientation: - string

Direction to animate new slides.

Accepted Values: 'horizontal', 'vertical'.

Default: 'horizontal'

animation - string

Animation effect type when transitioning slides.

Accepted Values: 'slide', 'fade'.

More animation types are coming soon…

Default: 'slide'

captionAnimation - string

Animation effect type to use when displaying built-in captions.

Default: 'slide'

captionDelay - integer

Time, in milliseconds, to delay the animation of built-in captions.

Default: 0

customCaption - string

Class name of a custom caption. Custom captions allow custom styling and positioning options. Custom captions can only use the 'fade' effect to show or hide. Leave this option blank to use the built-in caption system.

Default: ''

pauseOnHover - boolean

Stop progression of the slider when the pointer is hovering over it.

Default: false

startSlide - integer

Numberical index (starting from zero) of the slide to start on.

Default: 0

autoPlay - integer

Time, in milliseconds, to display each slide. Setting this option to 0 will initiate a slider that never progresses automatically.

Default: 0

fadeSpeed - integer

Animation speed, in milliseconds, when using the 'fade' animation effect.

Default: 350

fadeEasing - string

Type of animation easing when using the 'fade' effect.

By default, jQuery is packaged with two easing functions: 'swing' and 'linear'. Read about these easing functions.

If you wish to have more easing options, download the jQuery Easing Plugin and include the script before glide.js.

Default: 'swing'

slideSpeed - integer

Animation speed, in milliseconds, when using the 'slide' animation effect.

Default: 350

slideEasing - string

Type of animation easing when using the 'slide' effect.

By default, jQuery is packaged with two easing functions: 'swing' and 'linear'. Read about these easing functions.

If you wish to have more easing options, download the jQuery Easing Plugin and include the script before glide.js.

Default: 'swing'

adjustHeight - boolean

Automatically adjust the height of the slider to the height of the currently showing slide. This option is only available when using the 'horizonal' orientation.

Default: false

adjustHeightSpeed - integer

Animation speed, in milliseconds, at which the height of the slider is adjusted.

Default: 350

adjustHeightEasing - string

Type of animation easing when adjusting the height of the slider.

Default: 'swing'

slideContainer - string

Class name of the container that all fo the slides are contained within.

Default: 'slider_container'

currentClass - string

Class name of the slide that is currently visible.

Default: 'current'

paginationClass - string

Class name to apply to pagination link container.

Default: 'pagination'

nextClass - string

Class name to apply to the 'next' button.

Default: 'next'

prevClass - string

Class name to apply to the 'prev' button.

Default: 'prev'

keyboardNav - boolean

Allow the use of the arrow keys to navigate to next and previous slides.

Default: false

Callbacks

initCallback(options)

Called after slider is initialized.

Passes the set of options defined for the current slider into the function.

loadedCallback()

Called after slides are loaded.

animationStart(currentSlideIndex, currentSlide, nextSlideIndex, nextSlide)

Called before every animation.

Passes the numerical indexes of the current and next slides and the jQuery objects representing those slides.

animationEnd(currentSlideIndex, currentSlide, nextSlideIndex, nextSlide)

Called after every animation.

Passes the numerical indexes of the current and next slides and the jQuery objects representing those slides.

Methods

Glide.js is also packaged with methods that enable easy manipulation of slider actions and options.

In order to call methods, the glide() function is called with parameters on the element the slider was initialized on.

The first parameter is a string representing the name of the method you wish to call. The second and third parameters exist for certain methods -- see below.

get

Return the value of the specified option.

$('#slider').glide('get', 'autoPlay');

set

Set the value of the specified option.

$('#slider').glide('set', 'animationSpeed', 800);

Immediately triggers the slider to progress to the next slide.

$('#slider').glide('next');

Immediately triggers the slider to regress to the previous slide.

$('#slider').glide('prev');

to

Immediately triggers the slider to navigate to the specified slide number.

$('#slider').glide('to', 3);

start

Trigger autoPlay on the slider. Optionally set the length of time each slide is visible.

$('#slider').glide('start'); // Default 3 seconds per slide.
$('#slider').glide('start', 6000); // 6 seconds per slide.

stop

Stop the slideshow.

$('#slider').glide('stop');