v1adimirbezrukov

Если есть Jq.
В моем случае навигация должна была располагаться вне слайдера и таких слайдеров несколько на странице.
Настройки конечно же свои нужно ставить.

<div class="catalog-common__main-slider">
              <div class="swiper-container catalog-common__slider">
                <div class="swiper-wrapper">
                  <div class="swiper-slide hit__item"></div>
                  <div class="swiper-slide hit__item"></div>
                 <div class="swiper-slide hit__item"></div>
                 <div class="swiper-slide hit__item"></div>
                 <div class="swiper-slide hit__item"></div>
                </div>
              </div>
              <div class="swiper-button-next"><img src="images/catalog-common-arrow-next.svg" alt="" /></div>
              <div class="swiper-button-prev"><img src="images/catalog-common-arrow-prev.svg" alt="" /></div>
            </div>

$('.swiper-container').each(function (i) {
    i++;
    var i = new Swiper(this, {
      slidesPerView: 3.4,
      spaceBetween: 20,
      navigation: {
        nextEl: $(this).parent().find('.swiper-button-next')[0],
        prevEl: $(this).parent().find('.swiper-button-prev')[0],
      },
      breakpoints: {
        0: {
          slidesPerView: 1.4,
        },
        768: {
          slidesPerView: 3.25,
          spaceBetween: 12,
        },
        992: {
          slidesPerView: 2.4,
        },
        1401: {
          slidesPerView: 3.4,
        },
      },
    });
  });