Arrows become disabled in "loop" type slide instead of looping and shifting clones
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.x.x
Description
We have a splidejs slider in place. When it's initially loaded, it uses the following options:
var sdSlider = new Splide(el, {
clones: 0,
fixedWidth: '308px',
gap: '1.9rem',
mediaQuery: 'min',
pagination: false,
perMove: 1,
type: 'slide',
});
Once a user has navigated the first slide out of the left side of the viewport, we update the slider options as such:
sdSlider.options = {
clones: 12,
type: 'loop'
}
At this point, dragging/swiping works correctly to navigate in either direction, infinitely looping as expected.
However, using the arrow buttons does not loop infinitely. When reaching the end of the true (non-clone) slides, the 'next' arrow becomes disabled, although the clones display to the right of this last slide. Dragging/swiping operates correctly even at this point and advances the slider and removes the disabled attribute on the 'next' arrow.
Even using a separate custom non-arrow element with a click event listener that fires sdSlider.go('>') does not advance the slider, although it does not become disabled like the actual 'next' arrow does.
Reproduction Link
No response
Steps to Reproduce
- Create a slider using v4.x.x of splidejs
- Set it to type 'slide' initially with no clones
- After interaction with it, set clones to a non-zero number and update the type to be 'loop'
- Observe that dragging/swiping will loop it infinitely in either direction but the arrow navigation remains stuck in 'slide' mode and become disabled at the beginning and end of original non-loop set of slides.
Expected Behaviour
Expected behavior is that once the options for the slider are update to 'loop'-type, the arrow navigation should never become disabled and should loop infinitely.
This is not a bug. The type option is a readonly option. Only responsive options (those with a checkmark on the options documentation page) can be updated.