Untitled

<div class="navigation-tabs-container">
  <!-- Left arrow -->
  <span class="nav-arrow nav-arrow-left" onclick="scrollLeft()">&#9664;</span>
  
  <!-- Tabs container -->
  <div class="navigation-tabs-body-{{ section.id }}">
    {% for block in section.blocks %}
      <a href="" class="navigation-tabs-item-{{ section.id }}" data-use-link="{{ block.settings.use_link }}" data-url="{{ block.settings.url }}">
        <!-- Tab content goes here -->
      </a>
    {% endfor %}
  </div>
  
  <!-- Right arrow -->
  <span class="nav-arrow nav-arrow-right" onclick="scrollRight()">&#9654;</span>
</div>

<script>
  function scrollLeft() {
    document.querySelector('.navigation-tabs-body-{{ section.id }}').scrollBy({ left: -100, behavior: 'smooth' });
  }

  function scrollRight() {
    document.querySelector('.navigation-tabs-body-{{ section.id }}').scrollBy({ left: 100, behavior: 'smooth' });
  }
</script>