Почему в слайдере появляется пустое пространство?

Question

[Нина]

Делаю адаптивный слайдер с помощью swiper. При расширении 1200px по макету слайды должны располагаться не в одну линию, а в две (одна под другой)б причем 1-й и последний слайды должны быть больше остальных и занимать две линии сразу:


Я сделала такое расположение с помощью display: flex и flex-direction: column. Без подключения скрипта все выглядит нормально. После подключения скрипта слайды начинаются не с первого, а с предпоследнего, и после прохождения одного цикла после последнего слайда идет пустота. Через несколько секунд снова появляется предпоследний слайд, и цикл начинается снова. При этом в html разметке в браузере появляются какие-то дублирующие слайды.

JS для слайдера:

const slider1 = document.querySelector('.products__slider');

let mySwiper1 = new Swiper(slider1, {
  slidesPerView: 1,   // Количество показываемых слайдов
  spaceBetween:-16,  // Расстояние между слайдами
  loop: true,  // Зацикленность слайдера (loop - цикл)
  // slidesPerGroup: 3, // Группировать слайды по 3
  slideToClickedSlide: true, //Перелистывать слайды при клике на каком-то из них
  // autoplay: {
	// 	delay: 5000,
	// },
  navigation: {
    nextEl: '.products__slider-button-next',   // стрелочки навигации
    prevEl: '.products__slider-button-prev',
  },
  breakpoints: {
		768: {
			slidesPerView: 2,
			spaceBetween: -16,
		},
		1200: {     
      loop: true,		
      slidesPerView: 'auto',
      spaceBetween: 24,  
    	}		
	}
});

Полный код на github :
https://github.com/youngFrontendDeveloper/Windows-...

и
https://github.com/youngFrontendDeveloper/Premier