Hey folks, I wrote this code to create 2 * 2 grid layout for cards with dot navigation.

It seems to be working but card has to be multiple of 4. If there are 9 cards (which is in the example code) the last dot in the navigation renders wrong card. I've concatenated js/css/html in one page for ease. Codepen: https://codepen.io/Abhi1234567890/pen/yLxLGXV
4 Replies
Myndi
Myndi16mo ago
I think a CodePen would be more helpful to be fair.
MarkBoots
MarkBoots16mo ago
you can adjust your for loop condition a bit to make sure the index does not exceed the amount of cards
for (let i = currentIndex; i < currentIndex + cardsPerPage && i < cards.length; i++) {
...
}
for (let i = currentIndex; i < currentIndex + cardsPerPage && i < cards.length; i++) {
...
}
OmIsCool
OmIsCool16mo ago
Thank you so much ! It works ! You are amazing ! My brain could not comprehend that logic.