Experiment another approach on news carousel

Author: shravanngoswamii

_includes/news.qmd

@@ -30,21 +30,17 @@ listing:
 }
 
 #carousel-container {
-  width: 100%;
   overflow: hidden;
-  position: relative;
+  cursor: grab;
 }
 
-#carousel-container:focus {
-  outline: 2px solid #007acc;
-  outline-offset: 4px;
+#carousel-container.grabbing {
+  cursor: grabbing;
 }
 
 #carousel-track {
   display: flex;
   align-items: stretch;
-  transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
-  will-change: transform;
 }
 
 #carousel-track>.g-col-1 {
@@ -55,6 +51,10 @@ listing:
   min-width: 0;
 }
 
+#carousel-container.grabbing a {
+  pointer-events: none;
+}
+
 @media (max-width: 1024px) and (min-width: 769px) {
   #carousel-track>.g-col-1 {
     flex: 0 0 50%;
@@ -75,6 +75,7 @@ listing:
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  height: 100%;
 }
 
 #carousel-track>.g-col-1 .card-body {
@@ -123,175 +124,131 @@ listing:
   white-space: nowrap;
   flex-shrink: 0;
 }
-
-/* Carousel Buttons */
-.carousel-button {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  background: transparent;
-  color: #999;
-  border: none;
-  border-radius: 50%;
-  width: 3rem;
-  height: 3rem;
-  margin: 0 0.75rem;
-  font-size: 1.5rem;
-  font-weight: bold;
-  cursor: pointer;
-  z-index: 10;
-  opacity: 0;
-  transition: all 0.2s ease-in-out;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-#carousel-container:hover .carousel-button,
-#carousel-container:focus-within .carousel-button {
-  opacity: 1;
-}
-
-.carousel-button.prev {
-  left: 0;
-}
-
-.carousel-button.next {
-  right: 0;
-}
-
-.carousel-button:hover,
-.carousel-button:focus {
-  background: rgba(0, 0, 0, 0.05);
-  color: #000;
-  outline: none;
-}
 </style>
 
 <script>
-  // The script block remains the same as the previous version.
-  document.addEventListener('DOMContentLoaded', function () {
-    const listing = document.getElementById('listing-news');
-    if (!listing) return;
-
-    const originalItems = Array.from(
-      listing.querySelectorAll('.list.grid.quarto-listing-cols-3 > .g-col-1')
-    );
-    const N_original = originalItems.length;
-
-    let itemsPerView = getItemsPerView();
-
-    if (N_original <= itemsPerView) {
-        listing.classList.remove('enhanced-carousel');
-        return;
-    }
-
-    listing.classList.add('enhanced-carousel');
-
-    const carouselContainer = document.createElement('div');
-    carouselContainer.id = 'carousel-container';
-    carouselContainer.setAttribute('tabindex', '0');
-    
-    const carouselTrack = document.createElement('div');
-    carouselTrack.id = 'carousel-track';
-
-    const prevButton = document.createElement('button');
-    prevButton.className = 'carousel-button prev';
-    prevButton.setAttribute('aria-label', 'Previous slide');
-    prevButton.innerHTML = '&#10094;';
-
-    const nextButton = document.createElement('button');
-    nextButton.className = 'carousel-button next';
-    nextButton.setAttribute('aria-label', 'Next slide');
-    nextButton.innerHTML = '&#10095;';
-
-    carouselContainer.append(carouselTrack, prevButton, nextButton);
-    listing.parentNode.insertBefore(carouselContainer, listing.nextSibling);
-
-    const postClones = [];
-    for (let i = 0; i < itemsPerView; i++) {
-        const clone = originalItems[i % N_original].cloneNode(true);
-        clone.classList.add('clone');
-        postClones.push(clone);
-    }
-    const preClones = [];
-    for (let i = N_original - itemsPerView; i < N_original; i++) {
-        const clone = originalItems[i].cloneNode(true);
-        clone.classList.add('clone');
-        preClones.push(clone);
-    }
-
-    carouselTrack.append(...preClones, ...originalItems, ...postClones);
-    
-    const allItems = carouselTrack.querySelectorAll('.g-col-1');
-    allItems.forEach(item => {
-        const titleElement = item.querySelector('.listing-title');
-        if (titleElement) {
-            titleElement.setAttribute('title', titleElement.textContent.trim());
-        }
-    });
-
-    let currentIndex = itemsPerView;
-    let shiftPercent = 100 / itemsPerView;
-    const transitionDuration = 700;
-    const displayDuration = 3000;
-    let intervalId;
-
-    function moveTo(index, withAnimation = true) {
-        carouselTrack.style.transition = withAnimation
-            ? `transform ${transitionDuration / 1000}s cubic-bezier(0.25, 1, 0.5, 1)`
-            : 'none';
-        currentIndex = index;
-        carouselTrack.style.transform = `translateX(-${currentIndex * shiftPercent}%)`;
-    }
-
-    moveTo(currentIndex, false);
-
-    function nextSlide() {
-        moveTo(currentIndex + 1);
-    }
-
-    function prevSlide() {
-        moveTo(currentIndex - 1);
-    }
-    
-    function startAutoplay() {
-        clearInterval(intervalId);
-        intervalId = setInterval(nextSlide, displayDuration);
-    }
-    
-    function stopAutoplay() {
-        clearInterval(intervalId);
-    }
-
-    nextButton.addEventListener('click', () => { stopAutoplay(); nextSlide(); });
-    prevButton.addEventListener('click', () => { stopAutoplay(); prevSlide(); });
-
-    carouselTrack.addEventListener('transitionend', () => {
-        if (currentIndex >= N_original + itemsPerView) {
-            moveTo(itemsPerView + (currentIndex - N_original - itemsPerView), false);
-        }
-        if (currentIndex < itemsPerView) {
-            moveTo(N_original + (currentIndex), false);
+    document.addEventListener('DOMContentLoaded', function () {
+        const listing = document.getElementById('listing-news');
+        if (!listing) return;
+
+        const originalItems = Array.from(listing.querySelectorAll('.list.grid.quarto-listing-cols-3 > .g-col-1'));
+        if (originalItems.length === 0) return;
+
+        listing.classList.add('enhanced-carousel');
+
+        const carouselContainer = document.createElement('div');
+        carouselContainer.id = 'carousel-container';
+
+        const carouselTrack = document.createElement('div');
+        carouselTrack.id = 'carousel-track';
+
+        carouselTrack.append(...originalItems);
+        carouselContainer.append(carouselTrack);
+        listing.parentNode.insertBefore(carouselContainer, listing.nextSibling);
+
+        const slides = Array.from(carouselTrack.children);
+        const displayDuration = 3500;
+        let isDragging = false,
+            startPos = 0,
+            currentTranslate = 0,
+            prevTranslate = 0,
+            currentIndex = 0,
+            hasDragged = false,
+            intervalId;
+
+        const getPositionX = (event) => event.type.includes('mouse') ? event.pageX : event.touches[0].clientX;
+        const getItemsPerView = () => {
+            const width = window.innerWidth;
+            if (width <= 768) return 1;
+            if (width > 768 && width <= 1024) return 2;
+            return 3;
         }
+        const stopAutoplay = () => clearInterval(intervalId);
+        const startAutoplay = () => {
+            stopAutoplay();
+            intervalId = setInterval(autoplayNext, displayDuration);
+        };
+
+        const dragStart = (event) => {
+            isDragging = true;
+            hasDragged = false;
+            startPos = getPositionX(event);
+            const style = window.getComputedStyle(carouselTrack);
+            const matrix = new DOMMatrix(style.transform);
+            prevTranslate = matrix.m41;
+            carouselContainer.classList.add('grabbing');
+            carouselTrack.style.transition = 'none';
+            stopAutoplay();
+        };
+
+        const dragMove = (event) => {
+            if (!isDragging) return;
+            hasDragged = true;
+            const currentPosition = getPositionX(event);
+            currentTranslate = prevTranslate + currentPosition - startPos;
+            setSliderPosition();
+        };
+
+        const dragEnd = () => {
+            if (!isDragging) return;
+            isDragging = false;
+            carouselContainer.classList.remove('grabbing');
+
+            const slideWidth = slides[0].getBoundingClientRect().width;
+            const movedBy = currentTranslate - prevTranslate;
+
+            if (movedBy < -50 && currentIndex < slides.length - getItemsPerView()) {
+                currentIndex++;
+            }
+            if (movedBy > 50 && currentIndex > 0) {
+                currentIndex--;
+            }
+
+            setPositionByIndex();
+        };
+
+        const setSliderPosition = () => {
+            const maxScroll = -(carouselTrack.scrollWidth - carouselContainer.clientWidth);
+            currentTranslate = Math.max(maxScroll, Math.min(0, currentTranslate));
+            carouselTrack.style.transform = `translateX(${currentTranslate}px)`;
+        };
+
+        const setPositionByIndex = () => {
+            const slideWidth = slides[0].getBoundingClientRect().width;
+            currentTranslate = currentIndex * -slideWidth;
+            carouselTrack.style.transition = 'transform 0.4s ease-out';
+            setSliderPosition();
+        };
+
+        const autoplayNext = () => {
+            const itemsPerView = getItemsPerView();
+            const maxIndex = slides.length - itemsPerView;
+            currentIndex = (currentIndex >= maxIndex) ? 0 : currentIndex + 1;
+            setPositionByIndex();
+        };
+
+        carouselTrack.addEventListener('click', (e) => {
+            if (hasDragged) {
+                e.preventDefault();
+            }
+        }, true);
+
+        carouselContainer.addEventListener('mousedown', dragStart);
+        carouselContainer.addEventListener('touchstart', dragStart, { passive: true });
+
+        window.addEventListener('mousemove', dragMove);
+        window.addEventListener('touchmove', dragMove, { passive: true });
+
+        window.addEventListener('mouseup', dragEnd);
+        window.addEventListener('touchend', dragEnd);
+
+        carouselContainer.addEventListener('mouseenter', stopAutoplay);
+        carouselContainer.addEventListener('mouseleave', startAutoplay);
+
+        document.addEventListener('visibilitychange', () => document.hidden ? stopAutoplay() : startAutoplay());
+        window.addEventListener('resize', () => window.location.reload());
+
+        startAutoplay();
     });
-
-    ['mouseenter', 'focusin'].forEach(e => carouselContainer.addEventListener(e, stopAutoplay));
-    ['mouseleave', 'focusout'].forEach(e => carouselContainer.addEventListener(e, startAutoplay));
-    document.addEventListener('visibilitychange', () => document.hidden ? stopAutoplay() : startAutoplay());
-
-    function getItemsPerView() {
-      const width = window.innerWidth;
-      if (width <= 768) return 1;
-      if (width > 768 && width <= 1024) return 2;
-      return 3;
-    }
-
-    window.addEventListener('resize', () => {
-        window.location.reload();
-    });
-
-    startAutoplay();
-  });
 </script>
 ```