Почему при показе слайдов происходит наложение одного слайда на другой или появляется слайд, который состоит на 50% из первого слайда и на 50% из второго слайда?

У меня возникли проблемы при использовании библиотеки swiper.js. В моем прошлом опыте я столкнулся с проблемой связанной с margin, и я решил ее, установив max-width. Сейчас я столкнулся с другой проблемой:
1) swiper-slide не меняет свою ширину при изменении разрешения экрана
2) У меня нет полной информации о возможных причинах этой проблемы.

Мне бы хотелось узнать возможные причины такого поведения в целом и получить рекомендации по туториалам для swiper.js, для общего образования. Кроме того, я хотел бы узнать решение для данной проблемы. Если решение, основанное на возможных причинах, не сработает, или если вам понадобится больше деталей, я готов предоставить код.

new Swiper('[data-hero-swiper="swiper"]', {
  navigation: {
    el:'[data-hero-swiper="pagination"]',
    clickable: true,
  },

  slidesPerView: 1,
  loop: true,
  allowTouchMove: false,
  centeredSlides: true,
  centeredSlidesBounds: true,
  spaceBetween: 0,
});
};