Addressing & Debugging a Semantics SLIDER Bug | eLife Product Page

[@piagetbenguela]

Hello, I'm a follower, I'm following this project. Send the source code, some functionality (Javascript) I am not able to apply.

[@codeharvestguide]

Hi, Concerning the source code, we love to encourage our viewers to follow through the videos, as all code is revealed and explained. Though, as you are experiencing issues with the code, send a message at our gmail account or through discord (info is in our "about" desc.) and we will assist you! However, the source code for all our videos will be shared in our GitHub account github.com/codeharvestguide soon at 1K subscribers, so support us by sharing the video and knowledge to your friends, colleagues/class mates and loved ones and stay tuned! Happy coding! 🙌

[@codeharvestguide]

Hi, after reviewing your code, there were two issues found in JavaScript: Issue 1: "let productCards = slideshowContainer.querySelector(".product-card");" Which should be changed to: "let productCards = slideshowContainer.querySelectorAll(".product-card");" To include All elements with ".product-card" class. Issue 2: Though the slideshow works well, the product cards do not say in one row, because in the Slideshow forEach loop, specifically in the for loop, this line is missing: productCards[i].style.marginRight = '0px' Used to remove the spacing of a product card that is now set to hidden, so here is the updated for loop, in the Slideshow forEach loop: for (let i = 0; i < productCards.length; i++) { if (i = lastElement - (productCardsPerRow - 1)) { productCards[i].classList.add("active"); if (i === lastElement) { productCards[i].style.marginRight = "0px"; } else { productCards[i].style.marginRight = `${marginSpacing}px`; } } else { productCards[i].classList.remove("active"); productCards[i].style.marginRight = '0px' } } Hope this helps! Happy coding 🙌