splide icon indicating copy to clipboard operation
splide copied to clipboard

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

Open samuelreichor opened this issue 11 months ago • 2 comments

Checks

  • [X] Not a duplicate.
  • [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

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 avatar Mar 04 '24 16:03 samuelreichor

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

samuelreichor avatar Mar 06 '24 14:03 samuelreichor

@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 :(

youngbloodk avatar Jul 18 '24 15:07 youngbloodk