Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Slider becomes 100% unusable when wrapped in a flex column container (Firefox Dev Ed v113.0b7) #252

Open
televators opened this issue Apr 28, 2023 · 3 comments

Comments

@televators
Copy link

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

<div class="gallery__inner">
  <div class="gallery__slider">
    <div class="gallery__slide">
      <img src="assets/img/photos/deer-1.jpg" alt="Drone shot of deer loaded onto MLX basket">
    </div>
    <div class="gallery__slide">
      <img src="assets/img/photos/deer-2.jpg" alt="Up close shot of deer loaded onto MLX basket">
    </div>
    <!-- more slides... -->
  </div>

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

JS

window.addEventListener( 'load', function() {
  new Glider( document.querySelector( '.gallery__slider' ), {
    slidesToShow: 3,
    arrows: {
      prev: document.querySelector( '.glider-prev' ),
      next: document.querySelector( '.glider-next' ),
    },
    dots: document.querySelector( '.dots' ),
  } );
} );

CSS

.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.

@NickPiscitelli
Copy link
Owner

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.

Are you trying to use it in a vertical fashion?

@televators
Copy link
Author

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.

Thanks, dude!

@NickPiscitelli
Copy link
Owner

Is there a width set on the Glider? If you provide a link or codepen I can help to take a look.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants