Swiper Slider Проблема с Arrows и SlidesPerView?

Question

[LuciferInTheSky]

Здравствуйте, проблема заключается в том, что после последних внесенных мною изменений, при этом данные изменения никак не касались Слайдера, он перестал корректно отображаться. У меня есть 2 страницы на которой в Хэдэре стоит Слайдер и в Секции где продукция, есть еще один слайдер, где показывается 3 Слайда, вместо одного, как в Хэдере. После внесенных мною изменений, стрелки в секции Продукции, перенеслись на верхний Слайдер, при том, что там никаких стрелок нет. Также теперь вместо 3 Слайдов, он показывает все Слайды которые влезают в размер экрана, при этом не по центру, а справа или слева. При этом на одной из страниц стоят Табы, которые переключают 5 разных Слайдеров и они постоянно прыгают из стороны в сторону. Выглядит это как то так





Так выглядит js

const swiper = new Swiper('.image-slider', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  },
  slidesPerView: 3,
  watchOverflow: true,
  slidesPerGroup: 1,
  speed: 2000,
  autoplay: {
    delay: 5000,
    stopOnLastSlide: false,
    disableOnInteraction: true
  },
  breakpoints: {
    320: {
      slidesPerView: 1,
    },
    480: {
      slidesPerView: 2,
    },
    992: {
      slidesPerView: 3,
    }
  },
  observer: true,
  observeParents: true,
  slidesPerColumn: 1
});

new Swiper('.header-slider', {
  slidesPerView: 1,
  slidesPerGroup: 1,
  speed: 2000,
  autoplay: {
    delay: 2000,
    stopOnLastSlide: false,
    disableOnInteraction: true
  },
  effect: 'fade',
  fadeEffect: {
    crossFade: true
  },
});

$(window).on("resize", function() {
    mySwiper.autoplay.start();
    mySwiper.update();
});

$('.btn-tab ul li button').on('click', function(){
  var dataid = $(this).data('tag');

  $('.btn-tab ul li button').removeClass('current');
  $(this).addClass('current');

  $('.swiper-tab-con').removeClass('current');
  $('#'+dataid).addClass('current');

});

Спасибо заранее за помощь.