Widget:Droflax

function activarFlechasCarrusel() {

   const carousel = document.querySelector('.skins-carousel');
   const wrapper = document.querySelector('.skins-carousel-wrapper');
   const leftBtn = document.querySelector('.skins-arrow.left');
   const rightBtn = document.querySelector('.skins-arrow.right');

   const skinCard = carousel.querySelector('.skin-card');
   if (!skinCard) return;

   const cardStyle = getComputedStyle(skinCard);
   const cardWidth = skinCard.offsetWidth + parseInt(cardStyle.marginRight || 0) + parseInt(cardStyle.marginLeft || 0);
   const scrollAmount = cardWidth;

   function hideArrow(btn) {
       if (!btn.classList.contains('desapareciendo') && btn.style.display !== 'none') {
           btn.classList.add('desapareciendo');
           setTimeout(() => {
               btn.style.display = 'none';
               btn.classList.remove('desapareciendo');
           }, 300);
       }
   }

   function showArrow(btn) {
       if (btn.style.display === 'none') {
           btn.style.display = 'inline-block';
           void btn.offsetWidth;
       }
       btn.classList.remove('desapareciendo');
   }

   function updateArrows() {
       const scrollLeft = Math.round(carousel.scrollLeft);
       const maxScrollLeft = Math.round(carousel.scrollWidth - carousel.clientWidth);

       const hasLeft = scrollLeft > 5;
       const hasRight = scrollLeft < maxScrollLeft - 5;

       if (hasLeft) showArrow(leftBtn);
       else hideArrow(leftBtn);

       if (hasRight) showArrow(rightBtn);
       else hideArrow(rightBtn);

       wrapper.classList.toggle('has-left', hasLeft);
       wrapper.classList.toggle('has-right', hasRight);
   }

   function scrollToAndTrack(targetScroll) {
       carousel.scrollTo({ left: targetScroll, behavior: 'smooth' });

       // Track scroll position every few ms until it's "stable"
       let lastPosition = null;
       let stableCount = 0;
       const checkInterval = setInterval(() => {
           const current = carousel.scrollLeft;
           if (current === lastPosition) {
               stableCount++;
               if (stableCount >= 3) {
                   clearInterval(checkInterval);
                   updateArrows(); // final check
               }
           } else {
               stableCount = 0;
               lastPosition = current;
           }
       }, 50);
   }

   leftBtn.addEventListener('click', () => {
       const scrollLeft = carousel.scrollLeft;
       const nextScroll = Math.max(0, scrollLeft - scrollAmount);
       scrollToAndTrack(nextScroll);
   });

   rightBtn.addEventListener('click', () => {
       const scrollLeft = carousel.scrollLeft;
       const maxScrollLeft = carousel.scrollWidth - carousel.clientWidth;
       const nextScroll = Math.min(maxScrollLeft, scrollLeft + scrollAmount);
       scrollToAndTrack(nextScroll);
   });

   // Recalcular siempre que haya scroll (por si es manual)
   carousel.addEventListener('scroll', updateArrows);

   new ResizeObserver(updateArrows).observe(carousel);

   updateArrows();

}