Netlify and final folder of Bankist Website has a bug on slider component
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.
@JonnerPaz thanks for the share I will try this code, If I find any bug or update I will let you know...
@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.