nickpiscitelli / glider.js Goto Github PK

Hi Nick
Thanks for this small, fast library. - I have a gallery with 12 pictures in total, only 3 pictures are visible at a time. Hitting 'next' button works for pics no. 4-6. Than, hitting again, it surpasses pics 7-9 und goes directly to pics 10-12. Hitting than the 'back' button works as expected (showing 7-9, than 4-6 and 1-3). Anything I can do? Same behavior for differents pictures. - Thanks, Oliver

When using responsive settings, the updated responsive settings are ignored after calling setOption(), until the window is resized and the breakpoint changes.

Reproduction steps:

1. Create a glider instance with responsive settings, for example:

const options =  {
    slidesToShow: 2,
    responsive: [
        {
            breakpoint: 500,
            settings: {
                slidesToShow: 4
            }
        }
    ]
};

const glider = new Glider(element, options);

2. Resize your window to >=500px so that the responsive settings are being enforced (4 slides).
3. Call setOption() and then refresh().

glider.setOption(options, true);
glider.refresh();

4. Observe how the responsive settings are not being enforced (2 slides instead of 4).
5. Resize your window (make it <500px and then >=500px).
6. Observe how the responsive settings are now being enforced (4 slides).

I'm using this in an AnuglarJS app. I have it setup, and initing correctly. However, when the slides change, Glider doesn't update/refresh correctly.

I have tried running the refresh method, but that hasn't changed anything.

The version on npm is currently at 1.6.6, so it misses a few fixes and updates.

Would be great to have the latest version available via npm

Hi,

I'm trying to create a drag and drop carousel of div's elements using glider.js as carousel.
When I'm adding the drag and drop functionality I'm getting this error:

"Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node."

Any clue how to overcome this issue? is anyone ever tried to implement a drag and drop functionality over items of Glider?

Thanks.

I get the error in the browser:

Uncaught TypeError: Cannot assign to read only property 'window' of object '#<Window>'

Search for window="undefined" here

On my page there is no use for this and I want to give the glider a margin bottom which is only possible with !important because the glider css overrides my styles which are selected with another css selector called videos-container. IMO things like styling, positioning etc are things for themes or the user itself should style not the lib.

It is just one line of code but over all it is nice for a lib to have as little as possible of css and js.

The package.json has a typo in the CLI switch

Great work on Glider 👍

One question: is it possible to snap to the closest slide when swiping and stopping in between two slides?

Lovely tool, quite like it. I'm having conflicts with the fact that I already have a css class called center which I use for (can you guess it)... centering text.

It's pretty easy for me to override this singular property, but I still felt important to point out: this is a terrible, terrible classname for a utility to assume ownership of.

It's probably too late to change it, but (if it's possible), you should really consider changing your css names to be less likely to conflict. active and draggable were a few others that seemed really capable of causing trouble.

Just took a look out of curiosity and noticed some glitches in the demos.

It's really easy to get the dot elements representing the scroll location selected when trying to click the slideshow arrows. Image explains better:

This would probably be remedied by adding user-select: none; to those arrows.

A majority of browsers support scrollbar-width property, including recent versions of Firefox, which means there's no need for the hacks detailed in the documentation.

• https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width
• https://www.caniuse.com/#feat=css-scrollbar

Hi Nick! Your slider is super. But i need Autoplay & Infinite-Mode.
Thanks.

The "Responsive Settings / Scroll Lock Support" example is missing the scrollLock: true option in the code block:

After destroying slider there's no way to re-initialize it.

not support RTL

It would be really nice to have .next(isActuallyDotIndex) and .previous(isActuallyDotIndex)` functions.

Here's the code (sorry, no PR. Don't want to clone, fork, etc.)

// this instanceof Glider === true
function next(isActuallyDotIndex) {
  this.scrollItem((isActuallyDotIndex ? this.page : this.slide) + 1, isActuallyDotIndex);
}

function previous(isActuallyDotIndex) {
  this.scrollItem((isActuallyDotIndex ? this.page : this.slide) - 1, isActuallyDotIndex);
}

Hi!

I stumbled at adding responsiveness to my glider instance. Couldn't understand why the breakpoints don't work as I expected. The reason appears to be that in gliderPrototype.settingsBreakpoint you are comparing breakpoint to window.innerWidth using > which contradicts to the way min-width css media queries work. I think >= here would make more sense…

@NickPiscitelli, loving the slider so far. The first issue I've run into is around hosting multiple glider instances within the same page. Only the first instance appears to work.

Do I need to declare multiple event listeners during the build phase or is there some other magic I'm missing.

This must be possible because you have multiple demo instances on your site: https://nickpiscitelli.github.io/Glider.js/

(stumbled upon your code watching DesignCourse's YouTube video: https://www.youtube.com/watch?v=FT9e8EQi8ys)

Glider will currently restructure the DOM on initialisation, moving the children of _.ele into a new <div class="glider-track".

This poses an issue when using Glider in React, as such a DOM manipulation is not tracked. Specifically, when re-rendering changes to the children of the Glider, React will attempt to remove the existing children -- which it expects to be direct descendants of _.ele, but as they have now moved, React crashes.

Having tried out a few options, I believe that the best solution would be to add an option (e.g. addTrack, default = true) that can prevent Glider from restructuring the DOM. That way, the new behaviour would be opt-in and non-breaking to existing users of Glider.

To use Glider with the new option, this:

<div class="glider-contain">
  <div class="glider">
    <div>your content here</div>
    <div>your content here</div>
    <div>your content here</div>
    <div>your content here</div>
  </div>

  <button role="button" aria-label="Previous" class="glider-prev">«</button>
  <button role="button" aria-label="Next" class="glider-next">»</button>
  <div role="tablist" class="dots"></div>
</div>

... would become this:

<div class="glider-contain">
  <div class="glider">
    <div class="glider-track"> <!-- this div would need to be added manually by the integrator -->
      <div>your content here</div>
      <div>your content here</div>
      <div>your content here</div>
      <div>your content here</div>
    </div>
  </div>

  <button role="button" aria-label="Previous" class="glider-prev">«</button>
  <button role="button" aria-label="Next" class="glider-next">»</button>
  <div role="tablist" class="dots"></div>
</div>

In glider.js, something like the following code could be used to support this new option:

if (_.opt.addTrack) {
    _.track = document.createElement('div')
    _.track.className = 'glider-track'
    _.ele.appendChild(_.track)
    while (_.ele.children.length !== 1) {
        _.track.appendChild(_.ele.children[0])
    }
}
else {
    _.track = _ele.children[0]
}

Please let me know your thoughts. If you'd like, I could create and submit a PR for the proposed changes

It'd be great if you could set responsive breakpoints with CSS instead of javascript, like so:

.slide-item {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .slide-item { width: 50%; }
}

It would be nice to have an argument like:

{
  dragSnapThreshold: 0.4
}

Which states:

Once the previous item is 40% off the view, a full animation to the next item in that direction will begin (ending the current drag interaction).

This would dramatically improve the feel of swiping to move through a gallery.

Glider can become "stuck" while trying to complete transition. Maybe there is some kind of mismatch in the math related to the track / items.

The problem is you can't rely on the glider-animated event as it's triggered multiple times, for as long as Glider is "stuck".

The use case where I had this problem is using the glider-animated event as a trigger for reseting a timer for an autoplay function.

Reproduce bug on this codepen (tried on Chrome while dev tools ):

https://codepen.io/fsavic/pen/EByGrd

1. Drag the glider around until it's in the "stuck" state
2. The output will display multiple "animation complete event" texts, triggered by the glider-animated event
3. Inspect the elements, and you'll see they are changed non-stop

Hotfix:

// copy from https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
if (!DOMTokenList.prototype.forEach) {
  DOMTokenList.prototype.forEach = function(f) {
    if (arguments.length === 1) for (var i = 0, Len = this.length; i !== Len; ++i) f(this[i], i, this);
    else for (var i = 0, Len = this.length, tArg = arguments[1]; i !== Len; ++i) f.call(tArg, this[i], i, this);
  };
}

I noticed that when you scroll in glider (holding down mouse-click)and leave the container but still hold down the mouse it stops the scrolling, which I find undesirable on desktop. Any way we could get continued scrolling even when leaving the container? Touch events seem to work that way, thought it might be nice to be consistent.

Because there is an extra space in the code: 'refresh ', here: https://github.com/NickPiscitelli/Glider.js/blob/master/glider.js#L148

I am very surprised that this is not a feature already.
I was able to achieve the same height items with a little CSS modification:
.glide__slide{ height: inherit; }
And having the child of glide__slide be 100% height.

It is mentioned in the docs that:

Glider.js now provides a glider-compat.min.js. Include this file to provide support for older browsers.

Yet, glider-compat.min.js is nowhere (obvious) to be found.

After clicking "Demos" button I can't scroll page.
https://nickpiscitelli.github.io/Glider.js/

Is there a way to control the dragging speed?
For instance, now when I drag a little bit, the slides are moved way more, like quicker...

Each of my elements have a shadow which gets cutted when using overflow method. Would it be possible to change the behavior to use transform?
So the glider-track would also get a transform: translateX(-280px);.

When current is the first item , does it support to click "back button", and show the last item?
Or when current is the last item , does it support to click "prev button", and show the first item?

@NickPiscitelli, To what extent would you say that Glider is a modern replacement for Slick?

Are there any not-so-obvious differences between the two?

delete please - posted mistakenly

Hi. I'm making a responsive website and I want to display fixed-width slides in a responsive carousel.

Unfortunately, fractional slides only work with fractional slidesToShow, which in my case in not a fixed number. When I set slidesToShow: "auto" and a fixed itemWidth, Glider makes slides wider to fit a non-fractional number of items on a screen.

In the following lines:

    if (_.opt.slidesToShow === 'auto'){
      _.opt.slidesToShow = Math.floor(_.containerWidth / _.opt.itemWidth);
    }

…the use of Math.floor is responsible for this (in my case unwanted) behaviour.

I managed to override the displayed item width using max-width in CSS, but the "scroll lock" function is now broken, since it's using this wrong, internally calculated width, instead of the one from settings.

So my proposal is this: when itemWidth is set by the user, assume that user wants fractional slides. Also when itemWidth is set, use it instead of a calculated one in scroll lock.

Or alternatively even read actual widths from the DOM – this may allow later to implement a slider with items with different widths. In this case setting slidesToShow: "auto" without specifying itemWidth may indicate that slides' widths must be read from the DOM. Scroll lock will probably become more complex, since breakpoints won't be uniform anymore…

Hi and thank you for this library!

I have added some custom style animations to my slides and noted that last slide not triggering className 'visible' when track scrolled to the end. Also this bug present in Glider demos.

You can see it here:

As you can see "navigation" right arrow is disabled, that means scroll in the end of track.

Hi,

The scrollPropagate entry in the documentation seems to be duplicated.

Thank you for the great slider uh, glider!

Currently, the responsive options are based entirely off the window width.
It would be good if they could also depend on input method (touch vs cursor).

Rationale: I would like to show 3.5 slides on touch-based devices as an indication that the track can be scrolled. On cursor-based devices, as there are buttons, I do not want to show incomplete slides.

I'm very happy to see a light lightweight lib without jquery, this is exactly what i'm looking for. Unfortunately there is no way to simply import it in a ES6 project. Do you plan to propose this lib as ES6 module ? This is the standard nowadays.

Currently, scrollLock will lock after inertial scrolling has completed. This causes a rough transition.

Would it be possible to improve support for inertial scrolling when using scrollLock?

Hey guy's i am trying to implement two gliders on a index page the first glider is working properly but not the second one please help...

We should have Travis CI running for every commit and PR and provide some unit tests.

Seems like the number of dots don't update when the slides are resized :(

Add "unglide" like how Slick has "unslick" to disable carousel on some breakpoints ?

Hey @NickPiscitelli,

Could you add a check here, to make sure window is defined?

Some tools might not have access to window while building and will fail. For example, trying to build with GatsbyJS failed for me because of this. They explain it here https://www.gatsbyjs.org/docs/debugging-html-builds/#how-to-check-if-window-is-defined.

Hi @NickPiscitelli,
Are you planning to add the autoplay feature?