splide icon indicating copy to clipboard operation
splide copied to clipboard

Arrows become disabled in "loop" type slide instead of looping and shifting clones

Open mg-aball opened this issue 2 years ago • 1 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.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

  1. Create a slider using v4.x.x of splidejs
  2. Set it to type 'slide' initially with no clones
  3. After interaction with it, set clones to a non-zero number and update the type to be 'loop'
  4. 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.

mg-aball avatar Jun 27 '23 13:06 mg-aball

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.

hudri avatar Jul 11 '23 09:07 hudri