I have a problem with arrows on the slider on the website that I've published a few days ago. A link to a website is https://blackfox.ai/. The problem is that the left arrow (swiper-button-prev) does the same thing as the right arrow (swiper-button-next). In other words, when I click on the left arrow, I want the previous slide to come from left to right, not from right to left. Is there anybody who had a similar problem and can help me?

HTML code for these arrows is:

<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>

JavaScript code for the slider itself is:

// 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
  },