ganlanyuan/tiny-slider

Slide does not keep state when shown as cloned version when loop: true

brianecook opened this issue · 1 comments

Issue description:
When a user clicks on a slide, I am toggling a class that shows the slide with a "selected" style using a modifier class on the slide. This works fine until the slider loops back around, in which case the style on the selected slide is completely absent. It's as if it was never selected. This is specifically the case if the slide has the following classes:

tns-item tns-slide-cloned tns-slide-active

It seems that slides that are cloned and active do not update to have any of the state changes of the original (non-cloned) slide that was selected. Is there anyway to preserve the selected state changes from the originally selected slide when the slide is presented as cloned and active?

Demo link/slider setting:

const slider = tns({
  container: $carousel,
  items: 2,
  gutter: 6,
  slideBy: 'page',
  mouseDrag: true,
  responsive: {
    1200: {
      items: 3,
      mouseDrag: false,
    }
  }
});

I've created a demo here. If you click the first slide and then click "Next" 4 times, you will see that the slide no longer has the selected state. I've noticed you have to click "Run" at the top corner of JSFiddle to get the demo to work.

https://jsfiddle.net/brianecook/7qxhkbng/1/

Tiny-slider version: ^2.9.4
Browser name && version: Firefox
OS name && version: Mac Ventura 13.4

Hi, were you able to solve the issue? I am also facing it currently.