Слайдер плохо отображается на мобильных устройствах

Question

Я только что реализовал слайдер с плагином swiper.js, и все работает правильно.Единственная проблема, которая у меня есть, заключается в том, что положение слайдера на мобильных устройствах (особенно с использованием Chrome, потому что в Safari нет проблем) нарушено.Я думаю, что это больше касается CSS, но я не уверен.

Я оставляю вам представление о том, что происходит, и код об этом.

Вот так это выглядит на мобильных устройствах сХром:

И так должно быть видно:

HTML: (Я ставлю только код изображения без добавленных текстов, так как они не решают проблему)

  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
       <?php
                $url= Ruta::ctrShowURL();
                $slide = SlideController::ctrShowSlide();
                    echo '<div class="swiper-slide">
                        <img class="img-responsive" src="'.$url.$slide["img"].'">
                         </div>';
                }
            ?>      

    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>

CSS:

    .swiper-slide {
      width: auto;
      height: auto;

    }

    .swiper-container{
        position:relative;
        margin:auto;
        width:100%;
        overflow: hidden;
        padding:0;}

/*=============================================
Mobile
=============================================*/

@media (max-width:768px){

    .swiper-container img{
      width: 100%;
      height: 160px;
      object-fit: cover;
    }

}

JS

<!-- Initialize Swiper -->

var swiper = new Swiper('.swiper-container', {
            speed: 700,
  spaceBetween: 30,
  centeredSlides: true,
  autoplay: {
    delay: 4000,
    disableOnInteraction: false,
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

Answer 1

Вы должны указать некоторую высоту для swiper-container, например

.swiper-container{
   height: 300px;
}

, вы даже можете поместить этот код в медиа-запрос для мобильных устройств, если хотите

, так как по умолчанию этоПринимая 100% высоты, это является причиной вашей проблемы