You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I dug through all 11 pages of issues, tried toggling all my Glider settings, tried restarting my machine even, and finally figured out what's happening.
I've got a simple static landing page I'm working on and am trying Glider for the first time (long time Slick user), and it was all gravy until all of a sudden in the middle of building out the section, the slider just stopped working entirely. Glider would initialize, the slider and navigation would be instantiated, but it was completely uninteractive, i.e., clicking on the prev/next buttons and dots did nothing, dragging didn't work, just sitting there unusable.
After much hair pulling, realized that once I disabled the following CSS, interactivity was restored: flex-flow: column nowrap;
Really not sure why that would be since visually at least everything looks fine. Everything is in the correct place and sized correctly, and Glider does indeed initialize.
My Setup
Note: I'm working in Firefox Developer Edition (113.0b7), but issue is present in regular Firefox (112) as well as Chrome (112.0.5615.138). I'm on Windows 10 22H2.
HTML
<divclass="gallery__inner"><divclass="gallery__slider"><divclass="gallery__slide"><imgsrc="assets/img/photos/deer-1.jpg" alt="Drone shot of deer loaded onto MLX basket"></div><divclass="gallery__slide"><imgsrc="assets/img/photos/deer-2.jpg" alt="Up close shot of deer loaded onto MLX basket"></div><!-- more slides... --></div><navclass="gallery__nav"><buttonaria-label="Previous" class="glider-prev">«</button><divrole="tablist" class="dots"></div><buttonaria-label="Next" class="glider-next">»</button></nav></div>
.gallery__inner {
display: flex;
/* Setting flex-direction to column breaks everything, either with flex-direction directly or in flex-flow. */flex-flow: column nowrap;
align-items: center;
justify-content: center;
max-width:calc( 100vw-6rem );
}
If I need to include any other info, please let me know! And thank you for building a nice successor to the legendary Slick that's just as nice to use.
The text was updated successfully, but these errors were encountered:
Glider ultimately shouldn't care about the display properties applied to it, but setting to column would force a vertical layout which I wouldn't expect to be well supported.
What you said is correct, however that's not exactly what's happening in this case. The actual Glider element isn't getting column, just it's parent wrapper. So, Glider is still in proper horizontal mode and it shouldn't be affected at all outside of sizing of the Glider element (.gallery__slider, in my case), but the sizing of it isn't altering the layout of the Glider element.
I'm burning the midnight oil on an emergency deadline so my brain's pretty mushy. Hope what I said makes sense. Tomorrow I can provide a screenshot or screen gif if needed.
The Issue
I dug through all 11 pages of issues, tried toggling all my Glider settings, tried restarting my machine even, and finally figured out what's happening.
I've got a simple static landing page I'm working on and am trying Glider for the first time (long time Slick user), and it was all gravy until all of a sudden in the middle of building out the section, the slider just stopped working entirely. Glider would initialize, the slider and navigation would be instantiated, but it was completely uninteractive, i.e., clicking on the prev/next buttons and dots did nothing, dragging didn't work, just sitting there unusable.
After much hair pulling, realized that once I disabled the following CSS, interactivity was restored:
flex-flow: column nowrap;
Really not sure why that would be since visually at least everything looks fine. Everything is in the correct place and sized correctly, and Glider does indeed initialize.
My Setup
Note: I'm working in Firefox Developer Edition (113.0b7), but issue is present in regular Firefox (112) as well as Chrome (112.0.5615.138). I'm on Windows 10 22H2.
HTML
JS
CSS
If I need to include any other info, please let me know! And thank you for building a nice successor to the legendary Slick that's just as nice to use.
The text was updated successfully, but these errors were encountered: