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

Netlify and final folder of Bankist Website has a bug on slider component #358

Open
JonnerPaz opened this issue Jun 11, 2023 · 2 comments
Open

Comments

@JonnerPaz
Copy link

Greetings. First of all, I would like to thank Jonas for creating such an awesome course. I have learnt a lot from it. It is my first time opening an issue so hope this works fine and forgive me if my english is a bit off

I have found a bug on slider component of bankist website proyect, where if you click the last dot and wether you use right arrow key from keyboard or the GUI right arrow key, it will not show the first element. But, if you click once again, it will show the second element of the slider component. This looks like it only happens when shifting to the right side, not the other way around. This bug also happens on the proyect shipped to netlify.

My deduction is that dots and arrow keys does not update the same variable, which is "curSlide", so when you jump right into the last element using the dots the bug triggers. I have made a few tweaks to make this work by just updating "curSlide" each time a dot is pressed:

const activateDot = function (slide) {
    curSlide = slide; // This will solve it
    document
      .querySelectorAll('.dots__dot')
      .forEach(dot => dot.classList.remove('dots__dot--active'));

    document
      .querySelector(`.dots__dot[data-slide="${slide}"]`)
      .classList.add('dots__dot--active');
  };

And converting the argument of activateDot on dotContainer event to a number:

dotContainer.addEventListener('click', function (e) {
    if (e.target.classList.contains('dots__dot')) {
      const { slide } = e.target.dataset;
      goToSlide(slide);
      activateDot(Number(slide)); // So it will always be a number, not a string
    }
  });

I didn't do a PR due to the fact that Jonas would not accept it, but I leave it here for anyone who wants to fix this small bug.

@SoumyaSubhrajit
Copy link

@JonnerPaz thanks for the share I will try this code, If I find any bug or update I will let you know...

@Madhavdua
Copy link

@JonnerPaz I have fixed the bug and created pull request.
It is my first open source contribution ,I hope it would work well.
Thank you.

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

3 participants