splide
splide copied to clipboard
Focus center with trimspace false not working correctly when showing slider on click
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
- Go to reproduction Link
- click the buttons
Expected Behaviour
The translatex should get calculated correctly.
Managed it to get it running by refreshing the slider with https://splidejs.com/guides/apis/#refresh every time when opening the modal :)
@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 :(