@SNina
Отчаянно пытаюсь научиться верстать хорошие сайты

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

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

Я сделала такое расположение с помощью 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
  • Вопрос задан
  • 77 просмотров
Пригласить эксперта
Ответы на вопрос 1
Get-Web
@Get-Web Куратор тега CSS
Front-End Developer
А что по вашему слайдер должен считать? он знает, что для него есть есть N-e кол-во слайдов, рассчитывает под них размер контейнера, ширину каждого слайда и отступы, а вы все это сами переопределили. слайдер все делает правильно.

Адекватным решением будет вставить ваши 4 блока в один слайд и не трогать родные стили свипера, если все блоки принципиально не должны быть по отдельности.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы