Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
brianecook opened this issue Jun 9, 2023 · 1 comment

Comments

@brianecook
Copy link

brianecook commented Jun 9, 2023

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants