Размер слайда ведёт себя неадекватно

Question

Всем привет!
Настраиваю swiper slider (я настраиваю его в своём vue приложении, но использую не пакет для vue, а обычный js swiper).
Я сделал вёрстку, инициализацию слайдера в mounted и импортировал всё нужное свайперу в файл где инициализирую его:

import Swiper from 'swiper/bundle';
import 'swiper/css/bundle';

Перед просмотром кода и работы слайдера подмечу: тут он работает прекрасно, но не у меня в коде. Подробности ниже
А также мне пришлось закомментировать тут импорт js&css и подключить их через CDN в html, а также mounted, ибо таким образом оно тут не работает

//import Swiper from 'swiper/bundle';
//import 'swiper/css/bundle';
//  export default {
//    name: 'slider',
//    mounted() {
          document.addEventListener('DOMContentLoaded', () => {
            new Swiper(".swiper", {
              loop: true,
              centeredSlides: true,
              slidesPerView: 'auto',
              spaceBetween: 100,
              // slidesPerGroup: 1,
              breakpoints: {
                1025: {
                  slidesPerView: 4,
                },
                200: {
                  slidesPerView: 2,
                }
              },
              pagination: {
                el: ".swiper-pagination",
                clickable: true,
                speed: 1000
              },
              speed: 1000,
              navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
              }
            })
          })
//    }

.swiper-slide img {
  height: 400px;
  /* width: 300px; */
}
.swiper-slide {
    padding: 80px 0;
}
/* .swiper-slide-active {
} */

/* @media (max-width: 1700px) {
  .swiper-slide-active {
    transform: scale(1.2);
}
} */
@media (max-width: 1400px) {
  .swiper-slide img {
    height: 350px;
  }
}
@media (max-width: 1201px) {
  .swiper-slide img {
    height: 270px;
  }
}
@media (max-width: 1025px) {
  .swiper-slide img {
    height: 400px;
  }
}
@media (max-width: 700px) {
  .swiper-slide img {
    height: 330px;
  }
}
@media (max-width: 550px) {
  .swiper-slide img {
      height: 290px;
  }
}
@media (max-width: 450px) {
  .swiper-slide img {
      height: 190px;
  }
}
@media (max-width: 400px) {
  .swiper-slide img {
      height: 190px;
  }
}
@media (max-width: 350px) {
  .swiper-slide img {
      height: 170px;
  }
}

<div class="slider-container swiper-container">
    <div class="swiper swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="img/offlineLanding/slider/1.png" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
        </div>
      </div>
      <div class="swiper-pagination"></div>
      <div class="btn-container">
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    </div>
  </div>
  <script src="https://unpkg.com/[email protected]/swiper-bundle.min.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/swiper-bundle.min.css">

Как он прекрасно работает тут! Но когда я инициализирую его в своём vue приложении я получаю следующее:
Слайд очень огромный в то время как картинка маленькая...я не знаю как наладить всё это, подскажите пожалуйста. Насколько я знаю нежелательно изменять ширину слайда иначе начнётся нечто неадекватное, но как решить данную проблему и что её вызывает я тоже не знаю.

Answer 1

//import Swiper from 'swiper/bundle';
//import 'swiper/css/bundle';
//  export default {
//    name: 'slider',
//    mounted() {
          document.addEventListener('DOMContentLoaded', () => {
            new Swiper(".swiper", {
              loop: true,
              width: 330,
              centeredSlides: true,
              slidesPerView: 'auto',
              spaceBetween: 100,
              // slidesPerGroup: 1,
              breakpoints: {
                1025: {
                  slidesPerView: 4,
                },
                  1024: {
                  slidesPerView: 2,
                },
                   700: {
                  slidesPerView: 2,
                },
                   550: {
                  slidesPerView: 2,
                },
                   450: {
                  slidesPerView: 2,
                },
                 400: {
                  slidesPerView: 2,
                },
                350: {
                  slidesPerView: 2,
                },
                200: {
                  slidesPerView: 2,
                }
              },
              pagination: {
                el: ".swiper-pagination",
                clickable: true,
                speed: 1000
              },
              speed: 1000,
              navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
              }
            })
          })
//    }

.swiper-slide img {
width:auto;
  height: 400px;
 }
.swiper-slide {
    padding: 80px 0;
}
/* .swiper-slide-active {
} */

/* @media (max-width: 1700px) {
  .swiper-slide-active {
    transform: scale(1.2);
}
} */

.swiper{width:316px;margin:0px auto;padding:0px;}
.swiper-slide{
flex-shrink: 0;
    height: 100%;
    position: relative;
    transition-property: transform;
    margin: 0px auto;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: center;}
@media (max-width: 1400px) {
  .swiper-slide img {
    height: 350px;
  }
}
@media (max-width: 1201px) {
  .swiper-slide img {
    height: 270px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: center;
  }
}
@media (max-width: 1025px) {
  .swiper-slide img {
    height: 400px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: center;
  }
}
@media (max-width: 700px) {
  .swiper-slide img {
    height: 330px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: center;
  }
}
@media (max-width: 550px) {
  .swiper-slide img {
      height: 290px;
      display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: center;
  }
}
@media (max-width: 450px) {
  .swiper-slide img {
      height: 190px;
      display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: center;
  }
}
@media (max-width: 400px) {
  .swiper-slide img {
      height: 190px;
  }
}
@media (max-width: 350px) {
  .swiper-slide img {
      height: 170px;
  }
}

<div class="slider-container swiper-container">
    <div class="swiper swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://klike.net/uploads/posts/2019-01/1547366815_1.jpg" alt="">
        </div>
      </div>
      <div class="swiper-pagination"></div>
      <div class="btn-container">
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    </div>
  </div>
  <script src="https://unpkg.com/[email protected]/swiper-bundle.min.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/swiper-bundle.min.css">

Answer 2

я когда-то сталкивался с такой проблемой. resizeObserver иногда некорректно работает если ваш слайдер находится в flex контейнере.

попробуйте опцию

{ 
  // ...
  resizeObserver: false,
}

или ограничьте размер flex контейнера

.parent-of-swiper-container {
  max-width: 100%;
}

https://github.com/nolimits4web/swiper/issues/4877#issuecomment-907002496

БЛОГ НА HUSL

Размер слайда ведёт себя неадекватно

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