Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Anime slides with classes and timeline

Recommended Posts

Hello !


I have a problem, I have to make a kind of slider work that changes the slide when I click on the sidebar that has the color of the next slide.
The first step works to switch from the first slide to the second one by changing the classes home-clr1 to home-clr2 in the html tag and slider__nav--1 to slider__nav--2 in the sidebar, but when switching to the second step (slide 2 to slide 3) they revert to home-clr1 and slider__nav--1 instead of switching to home-clr3 and slider__nav--3.


I put an example on codepen attached to this message.


Do you have an idea of the problem?


Thanks in advance for your help! 🙂

See the Pen ZELKgBB by pierrep- (@pierrep-) on CodePen

Link to post
Share on other sites

Heya Pierre,


You have a lot of event listeners attached to the same element. At the moment the first function is calling on click but the others aren't.


If I were you I would set up one event listener and handle the advancing logic within that

There's lots of ways to do this, but something like this would work - I've just set up the logic (check out console to see the values advancing) over to you to wire everything up!

See the Pen 6e06d9467bc4b9f8a65046ab0e2de905?editors=0111 by cassie-codes (@cassie-codes) on CodePen

Good luck!

  • Like 4
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.