высота swiper рассчитана неправильно, мобильная ориентация меняется

После загрузки страницы высота ползунка изначально правильная. При уменьшении размера окна высота считывателя пересчитывается правильно. Но при увеличении размера окна высота считывателя в большинстве случаев вычисляется неправильно, а изображения частично скрываются. В большинстве случаев я имею в виду, что при определенном размере окна высота правильная.

В мобильных Chrome и Safari при смене ориентации изображения частично скрываются. Только после прокрутки контента вверх и вниз высота прокрутки становится правильной, и изображения полностью видны.

swiper-container, а ширина изображения составляет 100%, чтобы быть отзывчивым.

Спасибо за помощь.

---- код -----

<link rel="stylesheet" href="idangerous.swiper.css">
<style>
.swiper-container {
  width: 100%;
  text-align: center;
}
.pagination {
  position: absolute;
  left: 0;
  text-align: center;
  bottom:5px;
  width: 100%;
}
.swiper-pagination-switch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: #999;
  box-shadow: 0px 1px 2px #555 inset;
  margin: 0 3px;
  cursor: pointer;
}
.swiper-active-switch {
  background: #fff;
}
</style>

<div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"> <img src="images/slide1.png"  width="100%"  /> </div>
        <div class="swiper-slide"> <img src="images/slide2.png"  width="100%"  /> </div>
        <div class="swiper-slide">
          <div class="content-slide">
            <p class="title">Slide with HTML</p>
            <p>You can put any HTML inside of slide with any layout, not only images, even another Swiper!</p>
          </div>
        </div>
    </div>
    <div class="pagination"></div>
</div>

<script src="idangerous.swiper.min.js"></script>
<script>
$(function() {
  var mySwiper = new Swiper('.swiper-container',{
    pagination: '.pagination',
    loop:true,
    grabCursor: true,
    paginationClickable: true,
    autoplay:3000,
    roundLengths: true,
    calculateHeight:true
  });
});
</script>

<div>Some content goes here. .... </div>

jquery swiper height
person eastwater    schedule 11.01.2015    source источник

Ответы (1)


arrow_upward
-2
arrow_downward

Эта проблема возникает, когда вы используете swiper в адаптивном макете (вариант динамической высоты). Существует исправление, позволяющее решить эту проблему путем повторной установки swiper с динамической высотой через javascript. Используйте этот код.

$(window).resize(function(){
  mySwiper.reInit() // or mySwiper.resizeFix()
});

person oztecnic    schedule 13.01.2015
comment
reInit() и resizeFix() недоступны в текущей версии Swiper. - person alljamin; 17.12.2019