SOLVED: Nested slider error in slide mode

Bricks Version: 1.5
Browser: Chrome 90
OS: macOS / Windows / Linux / etc.
URL: Travel Landing Page – My WordPress

Hey guys,

I noticed an error with the nested slider in slide mode. Once the slider reaches the last slide, it automatically flies to the first slide (??) and then the pagination gets unresponsive.

Here is a video to show you the issue:

And here are my slider settings:

Cheers,
Maxime

Hi Maxime,
Thanks again for your report!

Unfortunately, I cannot reproduce the issue - whether in 1.5 or in the current dev version. As for jumping back, is it possible that you have the “Rewind” option enabled (below Autoplay Settings)?

But even with the Rewind option enabled, the Arrow navigation still works for me, even after jumping back :thinking:

Best regards,
timmse

Hey @timmse ,

I provided a link to test it live, but if you need anything more from me in order to further debug, let me know.

Cheers,
Maxime

Hey Maxime, suspect that the perPage 2.5 and 2.2 causing this glitch.
Found that your instance bricksData.splideInstances.ab72ea.options.perPage is 2.5 and 2.2 on smaller screen.
Not sure this is from your own setting or from native Slider setting?

You try to set them to integer number for troubleshoot purpose.

If you wish to control the visibility of your Splide, try use padding

Refer: Issue with decimal perPage · Issue #255 · Splidejs/splide · GitHub

Thanks @itchycode , sounds like a good reason for a bug :joy: thought decimals are supported by swiper and slick :man_shrugging: I’ll test it in a minute, and if it works i’ll delete the post so nobody can see it in future :wink:

You are kidding me right? hahahaha
And this might related to the drag issue in another post.

yeah, I confirm this solves both issues. Thanks @itchycode, good catch! Adding .splide__list { padding: 0 10rem 0 0; } replicate the same effect.

1 Like

Though I’m still experiencing some weird stuff on mobile, like when I scroll up/down the slider jump to the first slide…

@maximebeguin scroll up / down shouldn’t trigger the silder jump back to initial slide.

But it does when you resize your screen. Bricks reinitiate the instances on resize event.

On mobile, when the search bar appears/disappears when you scroll, I believe it triggers a resize event isn’t? That could be the cause of it

I don’t see a search bar on your page actually. But I dont think search form in Bricks triggering resize event.

Or you could just use this simple trick in dev tool to check if resize triggered.

window.addEventListener('resize', ()=>{console.log('resize event triggered')}) 

By the way, I see your slides quite normal and working good in mobile mode.

1 Like
I believe it triggers a resize

if you’re on iOS Safari, then yes the scrolling up and then down (whichever way controls the browser search to hide/show) will trigger a resize each time.

Haven’t looked at Bricks’ JS for it, but if this is right “Bricks reinitiate the instances on resize event”, then it’s a problem. They’ll need to remove that for iOS Safari, otherwise it’ll keep reinitiating on scroll, probably multiple times per second.

Update - yes, they’re running the function on resize every 250ms, this will be why the slider keeps resetting to the starting position as you scroll. Surprised this was added, as I think Splide already handles the resizing.

2 Likes

Oh ya, I found the same on android chrome too. Didn’t notice previously.

And now I understand what does the “search bar” means, it’s referring to the browser address search bar. Thanks David.

Can’t reproduce on desktop browser because it doesn’t has the same browser search bar behavior like in mobile device. That’s why no “resize” event triggers when scroll up / down in desktop.

And Yes, this is really an issue.

1 Like

it looks like this resizing on scroll issue was addressed in splideJS in version 3.1.9 - Release v3.1.9 · Splidejs/splide · GitHub

So this issue is Bricks specific, no doubt that 250ms resizing causing it. My guess is they added it for use inside of the builder, to ensure the slider is always correct when changing breakpoints (or similar) but were unaware of scrolling causing resizing on some mobile devices.

Anyway hopefully this all helps the Bricks team to fix.

3 Likes

Thanks so much for investigating @itchycode @wplit @maximebeguin !
I noticed the jumping thing too and added it to the bug tracker.

Since the actual problem has been solved, I mark the thread as solved.

Best regards,
timmse

@timmse to avoid problems in future, it would be great if the field would only accept integers and no decimals - the was the cause of the issue.

Thanks,
Maxime

1 Like