tiny-slider icon indicating copy to clipboard operation
tiny-slider copied to clipboard

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

Open brianecook opened this issue 1 year ago • 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

brianecook avatar Jun 09 '23 22:06 brianecook

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

AzerAliyev11 avatar Nov 14 '23 21:11 AzerAliyev11