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

Hey @jedrzejchalubek, i added the page navigation features as requested in #252

The syntax was slightly changed from the suggestion.

|> pages to the right |< pages to the left

Additionally i added the waitForTransition flag which allows developers to decide if they want to create an artificial input delay or not.

Let me know what you think, ill gladly update the documentation when this features passes your requirements.

Todos

• [x] Fix pagination in combination with carousel

Please see my recording Video Infinite Carousel cloned element lose event listeners. My workaround is not using carouse but slider. Which is ok by me. I use Glide along with react. Maybe I did something wrong? The code is nasty, I'm not going to put it here, feel free to close my issue. But Glide is the only best carousel currently in modern JS world. Other react carousel option has too many bugs. I've tried.

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.

Hi

So, basically I use css3 transition in all <a> tags, to give nice effect on mouseover and other simple actions. I just noticed that after swipe (drag) the slider, all links inside slides are flickering. This is because the glide script is removing the "href" in all <a> tags on drag event and put it back when we release the drag. I can fix this by adding these lines in my CSS

	a:not([href]),
	a[href] {
		-webkit-transition: none !important;
		transition: none !important;
	}

yep, issues is fixed, but the "nice effect" on mouseover also disappear LOL

Any idea how to fix this without removing the transitions?

Many thanks!

Assume there is a reason that the bullets have to be hard coded, rather than generated based on how many slides there are? Planning to use with a CMS where slides could be added or removed by a user. Fairly simple to implement my end, just wondered if you'd considered building it in?

the breakpoint rules are applied to all sliders on the page, not just the one it's a part of. e.g. glide1 should show 3 on desktop and 1 on mobile whilst glide2 should show 6 on desktop and 2 on mobile. However, on mobile they both show 2.

new Glide('#glide1', {
	type: 'carousel',
	perView: 3,
	breakpoints: {
		800: {
			perView: 1
		}
	}
}).mount();
new Glide('#glide2', {
	type: 'carousel',
	perView: 6,
	breakpoints: {
		800: {
			perView: 2
		}
	}
}).mount();

PS - I'm using Glide 3.0

Hello! This topic has kind of been answered here (https://github.com/jedrzejchalubek/Glide.js/issues/71), but since i don't really know javascript, i didn't understand exactly how and where to put the .reinit() code.

Here is where i am having the issue: http://helenaswax.com/2015/

As you can see, the slides are stacking to the left, but as soon as you change the browser window size, it adjusts perfectly. Could you help me with that?

Thanks in advance!

We are in troubles using Glide inside a Web Component, with LitElement. Should be good in general if the library supports the possibility of place his HTML structure inside <slot> and so dealing with Shadow DOM and other Web Components features. Rif:

• https://developer.mozilla.org/en-US/docs/Web/Web_Components
• https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement
• https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot

Acctually the library seems to not support the presence of <slot> inside.

Hi, my marketer liked your slider, and asked me to implement it (in a pretty basic way, nothing fancy).

The issue is that this isn't keyboard-accessible, which at the very least would prevent some companies and agencies from being able to use your slider. As a developer I like to ensure some basic accessibility too anyways...

So I've modified our copy of the slider to turn all the clickables into button elements (for the bullets, these are still inside LI elements). These automatically accept keyboard focus, and trigger click events with both enter and spacebar keys. In addition, I've added :focus styles to the :hover styles.

Some browsers put focus on elements clicked with the mouse, and usually the designers don't want those :focus styles to appear then, so we also happen to use a 2-line mouse-detection script so we can say "only show focus styles when no mouse detected" (could also add touch(start/end) to this as well).

Would you like a pull request?

I just noticed that there's an issue even on the documentation page with the drag & drop.

The element is lost and can't be moved after some mouse interactions. I'm not sure on which exact behaviour this is happening.

Is this issue already known? For me, it looks like it's quite critical and a basic behaviour which sould work. I can dig into the code and debug. But first I wanted to hear if there are already some ideas on the issue.

Browser: Chrome 71.0 (but I tried also on other browsers) OS: MacOS 10.14.2

Sizes sets the width as Components.Html.root.offsetWidth, is that right or should it be using Components.Html.track.offsetWidth? Sizes.width is used to calculate Sizes.slideWidth, in my case my track isn't the same width as the root container, so it's messing up the slide widths.

By the way, awesome work, the components have made it really easy to extend and fit my use case 🎉

Hey @jedrzejchalubek I've added lazy image loading as requested by #362

I've kept it pretty barebones in functionality as I wait to see if this is:

1. Something you even want the project to have.
2. How big in scope the lazy loading feature should be.

Initalization

The HTML syntax for lazy loading images is as follows:

<div class="glide">
  <div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
      <li class="glide__slide"><img class='glide__lazy' data-src="IMAGE_URL"></li>
      <li class="glide__slide"><img class='glide__lazy' data-src="IMAGE_URL"></li>
      <li class="glide__slide"><img class='glide__lazy' data-src="IMAGE_URL"></li>
    </ul>
  </div>
</div>

To initialize lazy loading the default lazy must be set to true, by default it is false.

new Glide('#glide', { lazy: true }).mount()

Additional defaults

• lazyInitialSlidesLoaded Defines the initial amount of slides to be loaded

• lazyScrollThreshold Defines the threshold in which lazy loading will begin. For example, a threshold of 1.2 will load the images if the carousel/slider is within 120% of the screen width and height

Let me know what you think, happy to amend PR further if necessary.

Transition is not being disabled, at the time of screen resize and the rewind of slide from last to first. Glide is not enabled after the transition is disabled.

I had make a slider with GlideJS. This widget is working fine. But when I am writing the jest test. My Test is failing, it's saying TypeError: Cannot read property 'querySelector' of undefined. Here is the complete error while I am playing the test case.

        TypeError: Cannot read property 'querySelector' of undefined

      55 |     const slider = new Glide(sliderRef.current, options);
      56 |
    > 57 |     slider.mount();
         |            ^
      58 |   }, [options]);
      59 |
      60 |   const handleOnMouseEnter = () => setNavigationVisible(true);

Here is the Test Suite which I write down.

    import React from 'react';
    import renderer from 'react-test-renderer';
    import Widget from './Widget';
    
    const mockArray = [
      { title: 'Mock Title 1', completed: false },
      { title: 'Mock Title 2', completed: false },
      { title: 'Mock Title 3', completed: false },
    ];
    describe('Widget', () => {
      it('renders Widget according to design', () => {
        const component = renderer.create(
          <Widget lessons={mockArray} title={'mock title'} />
        );
        const tree = component.toJSON();
    
        expect(tree).toMatchSnapshot();
      });
    });

I'm running into an issue, mostly on screens above 1800px or so, where, if the number of slides in the DOM is significantly less than the number of slides specified in a particular 'perView' config, as the carousel auto advances, there are gaps where the next set of cloned slides does not render. Ive tested this in a codepen (https://codepen.io/takmais/pen/MWXqXeE?editors=1010) with the most basic implementation and i've seen this behavior exhibited. Let's say you have 5 slides in the DOM, but in your glide config, you specify 10. After a while, after the carousel has auto advanced a few times, there will be gaps on the right where the last few cloned slides do not render for several seconds

I downloaded it, and unzipped it...

Have no idea what I'm looking at. It's just a bunch of files.

Try making it less complicated. It might gain more traction.

I have dragThreshold enabled and everything works great. I just don't want the image to move when dragging, i'd like it to instantly switch to the next image instead of having the image move slightly beforehand. This is causing the next slide to be anchored to where the previous slide moved to before it moved to the next slide.

Is this possible?