Tengo un problema con las flechas en el control deslizante en el sitio web que publiqué hace unos días. Un enlace a un sitio web es https://blackfox.ai/ . El problema es que la flecha izquierda (swiper-button-prev) hace lo mismo que la flecha derecha (swiper-button-next). En otras palabras, cuando hago clic en la flecha izquierda, quiero que la diapositiva anterior venga de izquierda a derecha, no de derecha a izquierda. ¿Hay alguien que haya tenido un problema similar y pueda ayudarme?

El código HTML para estas flechas es:

 <div class="swiper-button-prev" style="margin-left: auto; margin-right: auto;width: 85%;" tabindex="0" role="button" aria-label="Previous slide"></div> <div class="swiper-button-next" style="margin-left: auto; margin-right: auto; width: 85%;" tabindex="0" role="button" aria-label="Next slide"></div>

El código JavaScript para el control deslizante en sí es:

 // Testimonial Slider Three var testimonialSlider = new Swiper('.testimonial-slider-three', { slidesPerView: 1, slidesPerGroup: 1, loop: true, /*autoplay: true,*/ autoplay: { delay: 6000, disableOnInteraction: false, }, speed: 1000, autoHeight: true, spaceBetween: 30, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, pagination: { el: '.swiper-pagination-t0', type: 'bullets', clickable: true },