Splidejs / splide

Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript. No dependencies, no Lighthouse errors.
https://splidejs.com
MIT License
4.83k stars 418 forks source link

Focus center with trimspace false not working correctly when showing slider on click #1284

Open samuelreichor opened 6 months ago

samuelreichor commented 6 months ago

Checks

Version

v4.1.4

Description

Hello,

I'm working on a feature where a slider opens within a modal upon clicking. This modal is configured with the trimspace option set to false and focus centered. I've noticed that when the slider isn't present on the initial page load, the translateX values for splide__list don't get calculated correctly.

I understand that I could circumvent this issue by using a custom modal, but I'd prefer to utilize the native dialog element, which doesn't allow for this workaround.

Interestingly, when I resize the window, an event listener triggers and everything functions as expected. Is there something I can trigger when opening the modal as a quick fix? Alternatively, could you investigate this issue and provide a solution?

Reproduction Link

https://codepen.io/samuelreichor/pen/KKYpzBx

Steps to Reproduce

  1. Go to reproduction Link
  2. click the buttons

Expected Behaviour

The translatex should get calculated correctly.

samuelreichor commented 6 months ago

Managed it to get it running by refreshing the slider with https://splidejs.com/guides/apis/#refresh every time when opening the modal :)

youngbloodk commented 1 month ago

@samuelreichor I'm facing this same issue and refreshing via API does not work unless done from the console after everything is loaded for some strange reason. I just had to abandon Splide for this project due to time constraints and go with Flickity :(