templates/frontend/market/_partials/scroll-category.html.twig line 1

  2. <div class="category-bar">
  3.     <div class="scroll-container">
  4.         <div class="categories">
  5.             {% for categorie in categories  %}
  6.                 <div class="category-card rounded-pill d-flex justify-content-center">
  7.                     <span><a href="{{ path('app_market_search_by_category',{'id': categorie.id }) }}">{{ categorie.title }}</a></span>
  8.                 </div>
  9.             {% endfor %}
  10.         </div>
  11.         <button class="scroll-btn scroll-left-btn hidden">
  12.             <i class="las la-angle-left text-white"></i>
  13.         </button>
  14.         <button class="scroll-btn scroll-right-btn">
  15.             <i class="las la-angle-right text-white"></i>
  16.         </button>
  17.     </div>
  18. </div>
  19. <script>
  20.     const scrollContainer = document.querySelector('.scroll-container');
  21.     const scrollLeftBtn = document.querySelector('.scroll-left-btn');
  22.     const scrollRightBtn = document.querySelector('.scroll-right-btn');
  23.     const categories = document.querySelector('.categories');
  25.     scrollLeftBtn.addEventListener('click', () => {
  26.         scrollContainer.scrollLeft -= 100;
  27.         updateScrollButtonsVisibility();
  28.     });
  30.     scrollRightBtn.addEventListener('click', () => {
  31.         scrollContainer.scrollLeft += 100;
  32.         updateScrollButtonsVisibility();
  33.     });
  35.     function updateScrollButtonsVisibility() {
  36.         scrollLeftBtn.classList.toggle('hidden', scrollContainer.scrollLeft === 0);
  37.         scrollRightBtn.classList.toggle('hidden', scrollContainer.scrollLeft + scrollContainer.offsetWidth === scrollContainer.scrollWidth);
  38.     }
  40.     window.addEventListener('resize', updateScrollButtonsVisibility);
  41.     updateScrollButtonsVisibility();
  42. </script>