glidejs/glide

A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more

Glide.js is a dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more

What can convince you:

• Dependency-free. Everything included, ready for action.
• Lightweight. Only ~23kb (~7kb gzipped) with every functionality on board.
• Modular. Remove unused modules and drop script weight even more.
• Extendable. Plug-in your own modules with additional functionalities.
• Bundlers ready. Using Rollup or Webpack? We have your back.

Documentation

Visit glidejs.com for documentation.

Looking for old documentation? Wiki contains archived documentation of Glide.js in version ^2.0.0.

Donation

Glide.js is an open source project licensed under the MIT license. It's completely free to use. However, it would be great if you buy me a cup of coffee once in a while to keep me awake :)

• PayPal
• Github Sponsors

Getting started

Pull-in a latest version with NPM ...

npm install @glidejs/glide

... provide <link> to the required core stylesheet. You can also optionally add an included theme stylesheet ...

<!-- Required Core stylesheet -->
<link rel="stylesheet" href="node_modules/@glidejs/glide/dist/css/glide.core.min.css">

<!-- Optional Theme stylesheet -->
<link rel="stylesheet" href="node_modules/@glidejs/glide/dist/css/glide.theme.min.css">

... then, prepare a little bit of necessary markup ...

<div class="glide">
  <div data-glide-el="track" class="glide__track">
    <ul class="glide__slides">
      <li class="glide__slide"></li>
      <li class="glide__slide"></li>
      <li class="glide__slide"></li>
    </ul>
  </div>
</div>

... and finally, initialize and mount a Glide.

import Glide from '@glidejs/glide'

new Glide('.glide').mount()

Need a few selected modules? Import and mount only what you need.

import Glide, { Controls, Breakpoints } from '@glidejs/glide/dist/glide.modular.esm'

new Glide('.glide').mount({ Controls, Breakpoints })

Contributing

The issue channel is especially for improvement proposals and bug reporting. If you have implementing problems, please write on StackOverflow with glidejs tag.

Browser Support

• IE 11+
• Edge
• Chrome 10+
• Firefox 10+
• Opera 15+
• Safari 5.1+
• Safari iOS 9+

Building

Build using NPM scripts. The following scripts are available:

• build:css - Outputs CSS files from SASS files.
• build:js - Outputs all destination variants of the script.
• build - Comprehensively builds the entire library.
• test - Runs complete test suite.
• lint - Lints library JavaScript files.

Credits

• Jędrzej Chałubek - Creator
• Contributors

License

Copyright (c) 2014-present, Jędrzej Chałubek. Licensed under the terms of the MIT License.

glide's Issues

Touch support: not really

I'm not seeing touch support as you so claim. I'm just looking here:
http://jedrzejchalubek.com/glide/
To see if it's what I need. I'm using a real touch device (Galaxy Note 8) but swiping the slider does nothing. It just goes on in autoplay.

So if you can add the functionality you claim it has, or at least enable your first "big selling point" in the only demo that seems available, then that would be awesome.

Allow beforeTransition callback to abort a transition.

It'd be great if a transition could be aborted before it starts by allowing the callback function to return false, or something similar.
For example: https://github.com/inflammable/Glide.js/commit/ca648c1350cbd3815f946eb77a61c6f4805cbd7f#diff-176d594a67a2f55e9f3bc491b31153e5

Circular repeat instead of fly back to first slide

I wonder if this is possible to implement. This is a great slider but I am getting complaints from most of the people using the site that the fast fly back to the first slide is dizzying. Any way it can start repeating the first slide immediately, instead of quickly rewinding to the first one?

I didn't see an option in the documentation for this.

Thanks

navigationCurrentItemClass is not updated when navigation uses custom append

When the navigation element is appended to a custom HTML class:

<div class=".className"></div>

<script>
    $('.slider').glide({
        navigation: '.className'
        });
</script>

the navigation items do not pick up the .slider-nav__item--current class when it advances automatically to the next slide, or if the nav item is clicked to reach a new slide.
This is can be replicated in the example.html in the source.

Synchronize two slideshows

Is it possible to synchronize two slideshows? I am doing some before-and-after shots and when sliding through the before shots, I need it to automatically slide through the after shots, and vice-versa.

And ideas?

This doesn't have a "destroy" method

The slider is responsive but we can't specify in which breakpoints show it.

hover pause never resumes

When the I hover over my glide container it does pause, but when the pointer leaves the focus of the container, I would expect it to resume, but it doesn't.

Wont work with jQuery 1.6.1

i'm forced to use jquery 1.6.1 for a project...I updated the all occurrences of $.on to $.bind in your code...the click event fires, but the glide.next() animation will not work...any suggestions

Slider nav "current" class not working when appending elsewhere..

Hola!

I dont know if it's a bug, but when i'm appending the slider navigation via the init options (navigation), it looks that the "current" class is not working.

var editionsSlider = $('#slider-editions .slider').glide({
    autoplay : false,
    animationDuration : 700,
    animationTimingFunc : "cubic-bezier(0.645, 0.045, 0.355, 1.000)",
    keyboard : false,
    touchDistance : false,
    navigation : '.slider-nav-container',
    navigationCenter : false
}).data('api_glide');

Thanks :)

Can we show multiple items in one slide?

Suppose i want to show 3 slides at one go and then when the user clicks on the arrows, he sees another 3 slides and so on.

Remove Finder Cache File

I noticed you had a .DS_Store file in the root of your repo. In my opinion, those should not be committed; I make a point of always utilizing a .gitignore file to ensure that they are omitted.

To fix this bug, simply git rm the file, and then add the following line to a .gitignore file in the root of your repo:

.DS_Store

Once you commit your changes, never again will there be a .DS_Store file in your repo.

browser resize breaks it

works like a charm but when i resize the browser (or change mobile orientation), the slider doesn't update its size.

is there a way to 'restart' the slider?

Reinitialize glide when loading images from ajax

Hello, thank you for this amazing slider. its simple, fast and intuitive. but i have one problem. how can i reinit the slide when i change the imgs inside the slider with ajax?

recalling $('.slider').glide() after the ajax call is sucessfull doesnt seem to solve the issue.

API Method to Return Current Slide

There is an API method to return the number of the current slide, however I am looking for a way to return a jQuery object of the slide itself. I'd like to add a class of .active to the current slide.

This is more of a question than anything. Any help would be appreciated.

Best,
Daniel

Please add callbacks

Please add callbacks, something like beforeTransition, afterTransition. Thanks!

Scroll up/down swipe

Bug when swipe images. Page up/down scroll when swipe slides on mobile. Ex: goo.gl/8r7zWg

Placement of Glide.Js

It seems it must be placed after the elements in the slider, probably in the footer. If this is true (Would not work for me in the header) please make a note of it in the readme.md

[enhancement] Add missing bower.json.

Hey, maintainer(s) of jedrzejchalubek/Glide.js!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library jedrzejchalubek/Glide.js is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "jedrzejchalubek/Glide.js",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Loader

Hi,

Im sorry im creating an issue not sure how i can contact you. But is there any change the Glide.js can include a loader in the css & js something like this. im not sure what i need to put in the js to call the loading class up before the images are loaded :(

.slider .loading {
min-height: 50px;
background: url(images/loader.gif) center center no-repeat #fefaea;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 999;
}

Couldn't get two gliders working on same page

I tried to setup two gliders on the same page and was getting bizarre results. The second one would work for a few transitions and then it would stop. When I clicked on the "next" button it worked a few more times and then suddenly jump the whole page to the first glider. Weird.

Problem removing the slider (including callbacks).

Hi,

Firstly - fantastic work on this it seems like a really clean solution.

The slider if working great, but i've hit a problem when trying to remove the slider from the page.

Generally I find something like $(.slider').remove(); works to get rid of all bound events - but no matter what I try it seems like the afterTransition event still fires.

Could you suggest a way I could remove it, or consider adding a .destroy() method (suggested in a previous PR) which would include removing the callbacks?

Many thanks!

Double-click on navigation arrows causes unexpected behaviour

Double-clicking on the "previous" arrow whilst viewing the first slide, or double-clicking on the "next" arrow whilst viewing the last slide, causes the browser to go back one screen.

Instance in callbacks

Hi, thanks for this good work you're doing!

I think it would be useful if we could get the slider instance inside the callbacks: for example:

$('.slider').glide({
        beforeInit: function(instance) {
               var currentSlide = instance.current();
        }
});

What do you think about it?

Starting slide option missing

It would be great to have an extra option in order to define a specific starting point for the slider, as long as no destroy method exist.
Great piece of work though!

Add API destroy() and/or refresh() methods

I'm having an issue that I need to reapply the slider on an element after the screen size has changed but it simply doesn't work (the widths are all wrong).

It would seem that being able to destroy the existing instance on the element before calling .glide() again would fix it, or having a refresh() method which adjusts that which needs to be adjusted.

Is there any change of adding such methods in the future?

Windows Phone 8

In the WP8 browser swiping doesn't work. Also, on touch the arrows don't fade in as in e.g. the Android browser - although they are clickable.

Your contact info [no issue]

Hey @jedrzejchalubek, I would like to get in touch with you regarding some graphic design work. If interested, please let me know a way to get in touch with you :)

Navigation html markup

Hello,

I am cutomizing the slider to fit exactly my design. I'd like to put some tooltip on the navigation bullets, check this http://tympanus.net/codrops/2014/01/21/dot-navigation-styles/

Can we change the generated default markup ? i'd like to have ul > li > a instead of a

Maybe with a callback ? is it possible or u plan to do this in a future release ?

Many thanks

Single slide

Hi, is it intended that glide slides to a blank slide there is only one "real" slide?

Przejście fade

Witaj! Dobrym pomysłem byłoby dodanie efektu przejścia fade oraz możliwość wyboru animacji pomiędzy _slide_m a _fade_m.

When on last slide, reverse direction

Is there a way to reverse the order or change directions once the carousel hits the last slide?

Blocking up/down swipe

Up/down swipe are actually blocked within slider wrapper. When slider fills the screen there is no way to scroll up/down webpage (especially on mobile). Fix soon.

<!Doctype html> Not working

When I add <!doctype html> to the document, the code breaks. I downloaded the github version and the example does not have <!doctype html>. It breaks when I add. Any help will be much appreciated. thanks

Fade instead of Slide

This slider is great! Simple with great selectors. I want to work on making it fade instead of slide....I know. It's called a slider, but for some reason a lot of people want it to fade. So want to see if I can get a fade transition instead. Someone who might be able to get this working faster than I could thought. Thanks.

Opera support

It does't slide on Opera 12 and lower.

something strange with .current()

Hello,

i'm trying to display in the console, the current slide number, so i did this:

var editionsSlider = $('#slider-editions .slider').glide({
    autoplay : false,
    animationTimingFunc : "ease-in-out",
    keyboard : false,
    navigationCenter : false
}).data('api_glide');

and then

console.log(editionsSlider.current);

but it returns this in the console:

function (){return-d.currentSlide+1}

i should have a number right ?

center image inside the slide

hi

is there a way to center the image inside the slide on start and resize ?

Reduce CSS classes

I see you're using slider, slides & slide classes in CSS. IMHO, we can use only slider class (or better glide to not conflict with other sliders if we're using 2 sliders on same page) and style other elements using slider ul, slider li, etc.

Pull content out of the slide

Hey!

Is there any method that I could pull content from the current slide and display it somewhere else? You will understand more from the scheme in the paste link below.
http://paste2.org/tN4wJMcb

Error with latest version of jQuery

I recently upgraded my jQuery from 1.7.2 to 1.11.0 and Glide.js is now reporting the following error:

Uncaught TypeError: Cannot read property 'arrowsWrapperClass' of undefined glide.js:339
Glide.arrows glide.js:339
n.Callbacks.j jquery.min.js:2
n.Callbacks.k.fireWith jquery.min.js:2
n.extend.ready jquery.min.js:2
K

Prior to upgrading, there was no error and the arrow wrapper class is the default .slider-arrows

Despite the error, the plugin seems to work fine as I haven't encountered any loss of functionality.

Thanks
Dan

Slide transition slow on firefox

I'm testing my website on firefox and i'm using glide.js for the slider.

In chrome transitions is smooth, while in firefox no

Is this a know issue? Thanks

Setting empty string as navigationClass causes error

If in the options, you declare navigationClass: '', jQuery will throw the error "Uncaught Error: Syntax error, unrecognized expression: ."

It seems to be due to this line.

bullets showing in top right of slides

I had a hard time figuring out what the mysterious circles are on the top right side of the slides.
Firebug wasn't helpful at all, wasnt able to pinpoint the source, like they didn't exist.

Until it occurred to me, its the damn default bullet points of the li element!

A quick

 list-style:none;  

will help novice users.

Otherwise its a great simple script, thanks!

Multiple slideshows on the same page?

Hi,
Is it possible to have multiple instances of the slideshow on the same page?
I have it working using different ids but all the navigation options trigger every slideshow.
ie. clicking the next arrow moves all slideshows / pressing the keyboard arrow moves all slideshows

Is there is a way to force each navigation method to only work on its associated slideshow?

slider-nav centering

To avoid inline styling and give simpler control to users I suggest removing
left: 50% and margin-right inline styling from the nav, which the javascript sets, and instead use this for example on .slider-nav:

left: 0;
right: 0;
margin-left: auto;
margin-right: auto;

Should center it just fine, and make it a bit simpler for users to control the nav with their own css, without fooling around in the javascript deleting and changing stuff :)

Can't get rid of a tab at the top

At the top of the page some tab (with gray, round dot at the right) was generated by glide.js. How to remove it without an affect on the workability?

Open whole image to understand where the tab is.

dist css doesn't include arrow styles

Hiya! Love the tool, thanks so much.

The glide.css on your live site seems to include additional statements for the .slider-arrow class that are missing from the version on github, as far as I can tell. Confused me for a while until I realized this. Possible to add to the dist css?

.slider-arrow {
position: absolute;
display: block;
padding: 15px 20px;
margin-bottom: -50px;
border: 1px solid #fff;
border-radius: 8px;
color: #fff;
text-decoration: none;
}

            .slider-arrow:hover {
                background: #fff;
                color: #ccc;
            }

vs

.slider-arrow {
position: absolute;
display: block;
margin-bottom: -20px;
padding: 20px;
}

Navigation Affects Multiple GlideJS Instances

This is the first time I've reported an issue on Github. I'll do my best.

I'm running 4 separate instances of GlideJS widgets, all instantiated with the same block of code, by their class name .slider.

//Sliders on About page
var glide = $('.slider').glide({
arrowLeftText: '',
arrowRightText: '',
autoplay: false,
afterTransition: function(){
//For press section highlighting of logo
if( this.parent[0].className.indexOf('press') != -1 ) {
var slide = Math.abs( this.currentSlide );
$('ul#press li').removeClass('active');
$( $('ul#press').children()[slide] ).addClass('active');
}
}
}).data('api_guide');

The first slider scrolls through 8 quotes. The fourth scrolls through 5 quotes and uses the code in the afterTransition callback.

The second and third sliders are the ones that are causing the issue I'm reporting. The second slider holds one 'profile' slide for each of the people in the third slider and is visible, hiding the third slider - the third slider has 4 pictures of people and when clicked the second slider becomes visible, hiding the third slider.

In the case the third slider has 1 slide (with 4 people), clicking on a person makes the second slider visible - using the navigation on the second slider (paging through each of the 4 profiles), the third slider also moves - but since there is only one slide, it becomes blank.

$('#page-about .team .person').click(function() {
$('section.team').addClass('visible').children('.profiles').addClass('visible');
var glide = $('section.team .profiles .slider').glide().data('api_glide');
glide.jump(this.dataset.person);
});

At first, I was thinking the arrows that were showing were the ones from the third slider, maybe a z-index problem, but the third slider never goes into line 229 in this.build(), which would attach the arrows (if configured). Even if it was, the navigation is affecting 2 sliders at the same time.

I figured out a solution that works for this issue. Changing line 445 from:
if (this.arrows.wrapper) {
to
if (this.slides.length > 1 && this.arrows.wrapper) {

I hope this hasn't been too confusing, I can provide more information if needed. Typically I would just fix an issue and move on, but I really respect Glide.js it's really clean code, lightweight and I'd like to contribute if I can.

Another issue I notice is also with a 1 slide slider when adjusting screen widths (when testing a responsive website). I may submit another ticket if I can pinpoint something down.

Alternating pause / play toggle button

Hi,

I am attempting to create an alternating pause / play toggle button for my glide.js slider.

I am using the following mark-up for the button.

< div class="slider-playback play">< div class="icon" >< /div >< /div >

and I am using the following jQuery / Javascript event for the toggle.

jQuery('.slider-playback').on('click', function() {
    self = jQuery( this );      

    if ( self.hasClass('play') ) {
        self.removeClass( 'play' ).addClass( 'pause' );     // Toggle Pause / Play class
        glide.pause();

        console.log('Paused slideshow.');

    } else if (self.hasClass( 'pause' ) ) {
        self.removeClass( 'pause' ).addClass( 'play' );     // Toggle Pause / Play class
        glide.play();

        console.log('Resuming slideshow.');
    }
});

IE Support?

Latest build (master and 1.0.6) doesn't seem to work on IE9.

Tested locally and also same issue for demo page here:
http://jedrzejchalubek.com/glide/

Build 1.0.5 does work on IE9 however, with some minor undefined error message popping up.

What is the support on IE browsers?