@barsecky

Как настроить Swiper слайдер правильно?

Добрый день.
Помогите настроить swiper((
Дело в том что на десктопе все нормально, а вот как только начинаешь уменьшать экран до 768рх , слайдер начинает работать не праильно. Колличество слайдов не уменьшается, слайды начинают идти паровозиком пока не закончаться и за тем пустое пространство , потом опять по кругу.
Помогите разобраться. Спасибо!
const swiper = new Swiper('.swiper-container', {
  loop: true,
  spaceBetween: 20,


  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  scrollbar: {
    el: '.swiper-scrollbar',
  },
  breakpoints: {
      310: {
          slidesPerView: 1,
      },
      640: {
          slidesPerView: 2,
      },
      768: {
          slidesPerView: 3,
      },
  },
  autoplay: {
      delay: 1000,
      disableOnInteraction: false,
  },
} );


.swiper-container {
        width: 100%;
        height: 100%;
  } 

  @media (max-width: 1090px) {
    .swiper-container {
        width: 980px;
      }
  }
  @media (max-width: 768px) {
    .swiper-container {
        width: 728px;
      }
  }
  @media (max-width: 450px) {
    .swiper-container {
        width: 350px;
      }
  }
  @media (max-width: 360px) {
    .swiper-container {
        width: 300px;
      }
  }

<div class="articles_slider swiper-container">
                <div class="articles__wrapper swiper-wrapper">
                    <div class="articles__column swiper-slide">
                       <img src="./img/articles_img/1.jpg" alt="img" class="articles__img"> 
                       <p class="articles__column-title">Особенности работы Инстаграм</p>
                       <p class="articles__column-autor">Автор: Анастасия Кузнецова</p>
                       <p class="articles__column-date">07.12.2020</p>
                       <a href="" class="articles__column-link">Подробнее</a>
                    </div>
                    <div class="articles__column swiper-slide">
                       <img src="./img/articles_img/2.jpg" alt="img" class="articles__img"> 
                       <p class="articles__column-title">Как найти хорошего СММ-специалиста</p>
                       <p class="articles__column-autor">Автор: Анастасия Кузнецова</p>
                       <p class="articles__column-date">07.12.2020</p>
                       <a href="" class="articles__column-link">Подробнее</a>
                    </div>
                    <div class="articles__column swiper-slide">
                       <img src="./img/articles_img/3.jpg" alt="img" class="articles__img"> 
                       <p class="articles__column-title">Бизнес в Инстаграм. Как быстро раскрутить аккаунт</p>
                       <p class="articles__column-autor">Автор: Анастасия Кузнецова</p>
                       <p class="articles__column-date">07.12.2020</p>
                       <a href="" class="articles__column-link">Подробнее</a>
                    </div>
                    <div class="articles__column swiper-slide">
                        <img src="./img/articles_img/1.jpg" alt="img" class="articles__img"> 
                        <p class="articles__column-title">Особенности работы Инстаграм</p>
                        <p class="articles__column-autor">Автор: Анастасия Кузнецова</p>
                        <p class="articles__column-date">07.12.2020</p>
                        <a href="" class="articles__column-link">Подробнее</a>
                     </div>
                </div>
            </div>
  • Вопрос задан
  • 41 просмотр
Пригласить эксперта
Ответы на вопрос 1
@barsecky Автор вопроса
Забыл скриншот прикрепить))
Когда слайды заканчиваются за ними тянится шлейф из фризов, как то так
P.S. Не нашел кнопки редактировать
602f8384a5b47362140035.jpeg
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Artezio Минск
от 2 800 до 3 300 $
07 мар. 2021, в 03:18
1500 руб./за проект
06 мар. 2021, в 22:58
70000 руб./за проект
06 мар. 2021, в 22:36
10000 руб./за проект