Carrossel com setas

Bom dia Galera, to precisando de um Help.

Tenho esse código exibindo um carrossel de imagens, e gostaria de colocar as setas laterais para navegação.

{% if settings.show_categories_section %}
<div class="categorias-section" id="categorias-space">
<h2 class="categorias-title">Qual linha você precisa? </h2> <h4>Arraste para o lado -----> </h4> <br>
<div class="swiper-container">
<div class="swiper-wrapper">
{% for i in range(1, 9) %}
{% set titulo = settings[''''categoria_'''' ~ i ~ ''''_titulo''''] %}
{% set imagem = settings[''''categoria_'''' ~ i ~ ''''_imagem''''] %}
{% set link = settings[''''categoria_'''' ~ i ~ ''''_link''''] %}

{% if titulo and imagem and link %}
<div class="swiper-slide">

<a href="{{ link }}" title="{{ titulo }}">
<img
class="categoria-image swiper-lazy"
data-src="{{ asset(imagem) }}"
alt="{{ titulo }}">
<div class="swiper-lazy-preloader"></div>
<p class="categoria-title">{{ titulo }}</p>
</a>
</div>
{% endif %}
{% endfor %}
</div>


</div>
</div>


Arquivo .js


//Carrousel das categorias

document.addEventListener("DOMContentLoaded", function () {
new Swiper(''''.swiper-container'''', {
preloadImages: false,
lazy: {
loadOnTransitionStart: true,
loadPrevNext: true,
},
watchSlidesVisibility: true,
watchSlidesProgress: true,

slidesPerView: 2, //telas pequenas
spaceBetween: 30,
pagination: {
el: ''''.swiper-pagination'''',
clickable: true,
},
navigation: {
nextEl: ''''.swiper-button-next'''',
prevEl: ''''.swiper-button-prev'''',
},
breakpoints: {
639: {
slidesPerView: 2, //media
spaceBetween: 30,
},
1024: {
slidesPerView: 5, //telas grandes
spaceBetween: 30,
},
},
watchOverflow: true,
});
});