2 kaarten laten zien bij elke click

scripts/script.js

@@ -1,25 +1,29 @@
 document.addEventListener("DOMContentLoaded", function() {
-  const wrapper = document.querySelector(".wrapper");
   const carousel = document.querySelector(".carousel");
-  const firstCardWidth = carousel.querySelector(".card").offsetWidth;
+  const card = carousel.querySelector(".card");
+  const cardWidth = card.offsetWidth;
+  const numCardsToShow = 2; // Aantal kaarten om te laten zien bij elke klik
   const arrowBtns = document.querySelectorAll(".wrapper button");
 
-  // Add event listeners for the arrow buttons to scroll the carousel left and right
+  // Bereken de breedte van de kaarten die getoond moeten worden
+  const cardsToScrollWidth = numCardsToShow * cardWidth;
+
+  // Voeg event listeners toe voor de pijlknoppen om de carousel naar links en rechts te scrollen
   arrowBtns.forEach(btn => {
     btn.addEventListener("click", () => {
       if (btn.id == "left") {
         if (carousel.scrollLeft <= 0) {
-          // als we aan het begin zijn, scroll naar het einde.
+          // Als we aan het begin zijn, scroll naar het einde.
           carousel.scrollLeft = carousel.scrollWidth;
         } else {
-          carousel.scrollLeft -= firstCardWidth;
+          carousel.scrollLeft -= cardsToScrollWidth;
         }
       } else {
-        if (carousel.scrollLeft + carousel.clientWidth + firstCardWidth >= carousel.scrollWidth) {
-          // als we aan het einde zijn, terug naar begin.
+        if (carousel.scrollLeft + carousel.clientWidth + cardsToScrollWidth >= carousel.scrollWidth) {
+          // Als we aan het einde zijn, ga terug naar het begin.
           carousel.scrollLeft = 0;
         } else {
-          carousel.scrollLeft += firstCardWidth;
+          carousel.scrollLeft += cardsToScrollWidth;
         }
       }
     });