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

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

Open mg-aball opened 1 year ago

mg-aball commented 1 year ago

Checks

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.

hudri commented 1 year ago

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.