swiper slider сжимает блоки на мобильной версии

введите сюда описание изображения

Вообщем swiper slider сжимает блоки, (дефолтные слайды также сжимает) как от этого можно избавиться?

Должно быть так введите сюда описание изображения


Ответы (1 шт):

Автор решения: Roman96

Разобрался, возможно кому поможет

Для начала слайдам (картинкам в частности) в свойствах css укажите ширину min-width к примеру, потом самое главное)

В параметрах Swiper slider можно указать параметры показа слайдов, т.е обрезать их как на втором скрине вопроса

Например:
slidesPerView: 1.5 будет показывать 1 слайд целиком, а второй наполовину.

Воспользуйтесь брекпойнтами

Получилось так:

var swiper = new Swiper(".admins_slider", {
  slidesPerView: 4,
  spaceBetween: 30,
  loop: true,
  passiveListeners: true,
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  breakpoints: {
    320:{
      slidesPerView: 1.2,
      loop: false,
      passiveListeners: false,
    },
    720:{
      slidesPerView: 4,
      loop: true,
      passiveListeners: true,
    }
  },
});
→ Ссылка