Glider not initalizing properly on higher resolution screens
Opened this issue · 6 comments
When the view width is greater than 2638px glider is somehow not setting the correct width on the elements so that I can see the next glider element as you can see in the screenshot.
Any ideas how to resolve this ?
I can't see any reason why this would happen, it sounds like a page CSS issue (maybe a max-width setting). Can you link to the site or provide a reproducable playground link?
Can confirm this is happening for me, seems to revert to intended size on resize of window instantly. Example here: https://help.successcx.com/hc/en-au/p/customthemes
Hi Nick, I can confirm it is happening for me as well. I cannot give you a code-pen as the code is a bit complex (images are being rendered) and there are some privacy considerations (we are using glider in a shop that is not released yet). The glider settings are:
var tz_glider = new Glider(document.querySelector(gliderSelect), {
slidesToShow: colMobile,
slidesToScroll: 1,
scrollLock: true,
draggable: true,
duration: 1.9,
arrows: {
prev: '#tz_glider-prev'+sectionID,
next: '#tz_glider-next'+sectionID
},
responsive: [
{
breakpoint: 775,
settings: {
slidesToShow: colTablet,
slidesToScroll: 1,
duration: 0.25
}
},{
breakpoint: 1024,
settings: {
slidesToShow: colDesktop,
slidesToScroll: 1,
duration: 1.9
}
}
]});
And the html code is super basic - if one omits the rendering of the product content withing each slide:
I understand this is no codepen and there might be redundant stuff, but maybe it will give you an idea what is going on. Really sorry about this.
On smaller screens (the issue occurs on ultra wide monitors - above 3K), everything is tip-top. Very bizzare.
Hi Nick, could you please elaborate on your max-width hypothesis? The parent div, the one wrapping the slider has a max-width set to 1200px. But I do not understand how can this be the root cause. After all, it works fine on smaller monitors, with a resolution higher than 1200 but less than say 3K.