5.1 RC3 - Nonstop bouncing with hidden slide

Beta
#1

This is a fun one.

Repro:

  1. Add a new slider to a page, set to show 3 slides per screen
  2. Turn on the settings for both click and drag
  3. Turn on the setting for locking to the edges
  4. Turn on the customize settings to hide the 3rd slide on larger breakpoint
  5. Save, and visit the front end at those larger breakpoints

Observed:
The slider loads, and then bounces nonstop like it does when you scroll past the edges of a slider, (the rubber band effect).

I’ll grab a video tomorrow and check for any other settings if you can’t quickly repro, I’m away from the machine where I ran into this at the moment.

Edit, here’s a video:

#2

Thanks Devin!

Really cool Layout idea you’re working with there. Reminds me of some stuff Kory did for the Post Scroll Slider in the expansion pack. Checkout that video when it goes live. He’s got something similar but the content flows offscreen. It might give you some more inspiration (although it won’t really help with the issue at hand here).

Great find here with this bug. It looks like the “active slide” is no longer present, and it keeps trying to snap onto a non-existent location. Unfortunately, this ultimately led us to removing the hide per breakpoint option on the slides themselves. It’s honestly not something we considered originally. With all the permutations of options available, it’s going to be really difficult to manage slides being added/removed visually while still existing in the DOM.

If you manually add cs-hide-xl etc. classes to the Slider, you can still cause the slides to hide at different breakpoints, but there will be side effects. The only time I feel like it would work is under very specific conditions.

  • No pagination/navigation can be used since there will be an empty “stop” along the way
    • A little caveat here is that if you use Auto width (not paged) and set “Scroll By” to “Content” you can still navigate because it will move 100% of the viewport width instead of tracking the slides.
  • The Slider must be Inline. Stacked sliders will rotate through an empty slot
  • If you’re using Scroll Effects for active states, there’s a chance it could occasionally make a hidden slide “active” and you wouldn’t have an active state on screen.
  • Marquee should work fine
  • If you use drag interactions, it needs to be on “Free Scroll” so it doesn’t attempt to snap to anything

There could be other things going on as well, but that’s all that comes to mind. We don’t really have an effective way to manage all the differences, so the best thing we can do right now is just remove that option so users don’t get into those strange situations.

1 Like