Swiper js во flex элементе. Ломается верстка

Question

Коллеги, приветствую всех.
Не нашел ответа на свой вопрос в размещенных здесь темах. Точнее нашел отчасти.

Ситуация следующая:
На страницы есть секция, по задумке в которой слайдер - с одной стороны и текст - с другой стороны. К блоку родителю для слайдера и текста применено свойство display: flex;.
Как только я добавляю в первый дочерний элемент Swiper верстка ломается. Здесь я нашел часть решения - указать min-width: 0; для flex элемента со Swiper. От части это решило проблему - оба элемента отображаются на одной линии. Но теперь правый элемент прижимается к правому краю, а картинки в слайдере отображаются в верхнем левом углу слайдера + в слайдере появляются пустоты: справа от картинки и снизу от нее.

Буду благодарен, если кто сможет подсказать!

<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<link href="https://unpkg.com/swiper@8/swiper-bundle.min.css" rel="stylesheet"/>
<div class="tabs__container">
  <div class="tabs__swiper">
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img class="tabs__img" src="Photos/Store/1.jpg" alt=""></div>
        <div class="swiper-slide"><img class="tabs__img" src="Photos/Store/2.jpg" alt=""></div>
        <div class="swiper-slide"><img class="tabs__img" src="Photos/Store/3.jpg" alt=""></div>
        <div class="swiper-slide"><img class="tabs__img" src="Photos/Store/4.jpg" alt=""></div>
        <div class="swiper-slide"><img class="tabs__img" src="Photos/Store/5.jpg" alt=""></div>
        <div class="swiper-slide"><img class="tabs__img" src="Photos/Store/6.jpg" alt=""></div>
        <div class="swiper-slide"><img class="tabs__img" src="Photos/Store/7.jpg" alt=""></div>
        <div class="swiper-slide"><img class="tabs__img" src="Photos/Store/8.jpg" alt=""></div>
        <div class="swiper-slide"><img class="tabs__img" src="Photos/Store/9.jpg" alt=""></div>
        <div class="swiper-slide"><img class="tabs__img" src="Photos/Store/10.jpg" alt=""></div>
        <div class="swiper-slide"><img class="tabs__img" src="Photos/Store/11.jpg" alt=""></div>
      </div>
      <div class="swiper-pagination"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>
  <div class="tabs__description">
    <h3 class="tabs__heading">Магазины</h3>
    <p class="section-description">Основная задача системы видеонаблюдения в магазинах - охват торгового зала, причем желательно с двух разных ракурсов. Из-за небольшого расстояния 2-х мегапиксельные камеры обеспечивают хорошую картинку в качестве Full HD.</p>
    <p class="section-description">На кассовой зоне используется аналогичная 2-х мегапиксельная камера, но уже с моторизированным объективом для оптимальной настройки. Важна детальная фиксация процесса расчета с клиентом и работы с кассовым узлом. Удаленный доступ не всегда требуется,
      но вывод изображения на монитор для охраны – обязательно! Глубина архива индивидуальна!</p>
    <p class="section-description">Воспользуйтесь нашим калькулятором для расчета стоимости работ и наш менеджер свяжется с Вами для уточнения всех деталей.</p>
    <button class="btn btn_calc" type="button">РАССЧИТАТЬ СТОИМОСТЬ</button>
  </div>
</div>

БЛОГ НА HUSL

Swiper js во flex элементе. Ломается верстка

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