nickpiscitelli / glider.js Goto Github PK
View Code? Open in Web Editor NEWA fast, lightweight, dependency free, native scrolling carousel alternative!
Home Page: https://nickpiscitelli.github.io/Glider.js
License: MIT License
A fast, lightweight, dependency free, native scrolling carousel alternative!
Home Page: https://nickpiscitelli.github.io/Glider.js
License: MIT License
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:
const options = {
slidesToShow: 2,
responsive: [
{
breakpoint: 500,
settings: {
slidesToShow: 4
}
}
]
};
const glider = new Glider(element, options);
setOption()
and then refresh()
.glider.setOption(options, true);
glider.refresh();
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.
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:
Line 346 in 796e2d2
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
glider-animated
eventHotfix:
// 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.
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?
Line 23 in 71af3bf
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.