ganlanyuan / tiny-slider

Vanilla javascript slider for all purposes.
MIT License
5.26k stars 786 forks source link

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

Open brianecook opened 1 year ago

brianecook commented 1 year ago

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

AzerAliyev11 commented 1 year ago

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