Carousel Controls

<ul id="{{ controls }}"
    class="z-50 controls text-white m-0 p-0 flex items-center justify-between focus:outline-none z-10"
    aria-label="Carousel Navigation" tabindex="0">


  <li class="prev absolute left-0 top-0 bottom-0 flex items-center {{ controls-color }} sm:py-1 hover:bg-black hover:bg-opacity-50 focus:outline-none cursor-pointer"
      data-controls="prev" aria-controls="customize"
      tabindex="-1">

    {{!--    Bytesize Chevron Left --}}
    <svg class="fill-current mt-1 w-10 sm:w-16 h-10 sm:h-16" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
      <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M20 30 8 16 20 2"/>
    </svg>


  </li>

  <li class="next absolute right-0 top-0 bottom-0 flex items-center {{ controls-color }} sm:py-1 hover:bg-black hover:bg-opacity-50 focus:outline-none cursor-pointer"
      data-controls="next"
      aria-controls="customize"
      tabindex="-1">

    {{!--    Bytesize Chevron Right --}}
    <svg class="fill-current mt-1 w-10 sm:w-16 h-10 sm:h-16" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
      <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="m12 30 12-14L12 2"/>
    </svg>


  </li>

</ul>