ref: update carousel

vr_club_site/templates/site/js/game-carousel.js

@@ -1,66 +1,59 @@
+const wrapper = document.querySelector(".wrapper");
 const carousel = document.querySelector(".carousel");
 const firstCard = carousel.querySelector(".card");
-const cardWidth = firstCard.offsetWidth;
-const cardMarginRight = parseInt(window.getComputedStyle(firstCard).marginRight);
+const firstCardWidth = firstCard.offsetWidth;
+const carouselChildren = Array.from(carousel.children);
 
-let isDragging = false;
-let startX, startScrollLeft;
+let isDragging = false,
+    startX,
+    startScrollLeft,
+    timeoutId;
 
-const calculateCardPerView = () => {
-    return Math.round(carousel.offsetWidth / (cardWidth + cardMarginRight));
-};
+let cardPerView = Math.round(carousel.offsetWidth / firstCardWidth);
 
-const addCloneCards = () => {
-    const cardPerView = calculateCardPerView();
-    const allCards = [...carousel.querySelectorAll(".card")];
-    allCards.slice(-cardPerView).forEach((card) => {
-        carousel.insertAdjacentHTML("afterbegin", card.outerHTML);
-    });
-    allCards.slice(0, cardPerView).forEach((card) => {
-        carousel.insertAdjacentHTML("beforeend", card.outerHTML);
-    });
-};
+carouselChildren.slice(-cardPerView).reverse().forEach(card => {
+    carousel.insertBefore(card.cloneNode(true), carousel.firstChild);
+});
+
+carouselChildren.slice(0, cardPerView).forEach(card => {
+    carousel.appendChild(card.cloneNode(true));
+});
+
+carousel.classList.add("no-transition");
+carousel.scrollLeft = carousel.offsetWidth;
+carousel.classList.remove("no-transition");
 
 const dragStart = (e) => {
     isDragging = true;
     carousel.classList.add("dragging");
-    startX = e.pageX - carousel.offsetLeft;
+    startX = e.pageX;
     startScrollLeft = carousel.scrollLeft;
-};
+}
 
 const dragging = (e) => {
     if (!isDragging) return;
-    const x = e.pageX - carousel.offsetLeft;
-    const walk = (x - startX) * 2;
-    carousel.scrollLeft = startScrollLeft - walk;
-};
+    carousel.scrollLeft = startScrollLeft - (e.pageX - startX);
+}
 
 const dragStop = () => {
     isDragging = false;
     carousel.classList.remove("dragging");
-};
+}
 
 const infiniteScroll = () => {
-    if (carousel.scrollLeft <= 0) {
-        carousel.scrollLeft = carousel.scrollWidth - carousel.offsetWidth;
-    } else if (carousel.scrollLeft >= carousel.scrollWidth - carousel.offsetWidth) {
-        carousel.scrollLeft = 0;
+    if (carousel.scrollLeft === 0) {
+        carousel.classList.add("no-transition");
+        carousel.scrollLeft = carousel.scrollWidth - (2 * carousel.offsetWidth);
+        carousel.classList.remove("no-transition");
+    } else if (Math.ceil(carousel.scrollLeft) >= carousel.scrollWidth - carousel.offsetWidth) {
+        carousel.classList.add("no-transition");
+        carousel.scrollLeft = carousel.offsetWidth;
+        carousel.classList.remove("no-transition");
     }
-};
+}
 
 carousel.addEventListener("mousedown", dragStart);
 document.addEventListener("mousemove", dragging);
 document.addEventListener("mouseup", dragStop);
 carousel.addEventListener("scroll", infiniteScroll);
-
-window.addEventListener("resize", () => {
-    const cardPerView = calculateCardPerView();
-    if (cardPerView !== Math.round(carousel.offsetWidth / (cardWidth + cardMarginRight))) {
-        carousel.innerHTML = ""; // Clear carousel
-        addCloneCards();
-        carousel.scrollLeft = carousel.offsetWidth;
-    }
-});
-
-addCloneCards();
-carousel.scrollLeft = carousel.offsetWidth;
+wrapper.addEventListener("mouseenter", () => clearTimeout(timeoutId));

vr_club_site/templates/site/style/game-carousel.css

@@ -29,6 +29,7 @@
 }
 
 .carousel.dragging {
+    cursor: grabbing;
     scroll-snap-type: none;
     scroll-behavior: auto;
 }
@@ -51,6 +52,7 @@
     list-style: none;
     cursor: pointer;
     flex-direction: column;
+    flex: 0 0 auto;
 }
 
 .carousel.no-transition {
@@ -563,7 +565,7 @@
 }
 .carousel {
     scroll-behavior: smooth;
-    transition: scroll 0.4s ease-in-out;
+    transition: scroll 0.3s ease-in-out;
 }
 
 @media screen and (max-width: 768px) {