{% sw_extends '@Storefront/storefront/element/cms-element-product-slider.html.twig' %}
{% block element_product_slider_controls %}
{% if sliderConfig.navigation.value %}
<div class="custom-slick-control flex grid-gap-2 justify-end hidden lg:flex boxed-layout mb-6 -mt-10">
<button id="prev-slide-{{ element.id }}"
class="products-back flex p-1 transition duration-300 active:-translate-x-0.5 hover:-translate-x-0.5 w-10 h-10 border rounded-sm border-black flex justify-center items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 p-[2px] rotate-180">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</button>
<button id="next-slide-{{ element.id }}"
class="products-next flex p-1 transition duration-300 active:translate-x-0.5 hover:translate-x-0.5 w-10 h-10 border rounded-sm border-black flex justify-center items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 p-[2px]">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</button>
</div>
{% endif %}
{% endblock %}