Блог

Я использую owl carousel для изображений на странице. Во время перехода изображения прыгают, как будто они неодобрительно уменьшают высоту на экране.

все изображения имеют одинаковый размер, это js внизу страницы

 .carousel-main').owlCarousel({items:1,loop:true,lazyLoad:true,transitionStyle:"fade",autoplay:true,autoplayTimeout:4000,
  

Автонастройка: true, поле: 1, анимация: ‘fadeOut’, навигация: true, точки: false,navText: [«,»],})

 <div class="row align-items-center my-1"><div class="col-12 col-carousel"><div class="owl-carousel carousel-main"><div><img class="owl-lazy" data-src="https://designedathome.com/carousel/1.jpg" alt="stuffed snowman"></div><div><img class="owl-lazy" data-src="https://designedathome.com/carousel/2.jpg" alt="reindeer and snowman pillow"></div><div><img class="owl-lazy" data-src="https://designedathome.com//carousel/3.jpg" alt="mini houses"></div><div><img class="owl-lazy" data-src="https://designedathome.com/carousel/4.jpg" alt="silver sheep picture"></div><div><img class="owl-lazy" data-src="https://designedathome.com//carousel/5.jpg" alt="By the Sea"></div><div><img class="owl-lazy" data-src="https://designedathome.com/carousel/6.jpg" alt="table w globe lights"></div><div><img class="owl-lazy" data-src="https://designedathome.com/carousel/7.jpg" alt="draperies"></div><div><img class="owl-lazy" data-src="carousel/8.jpg" alt="living room w lamp"></div></div></div></div></div>  

ссылка на страницу, на которой он находится

Вам нужна дополнительная информация?

У меня есть решение этой проблемы, но не вините меня. Это не лучшее решение, но, по крайней мере, оно работает. Я понятия не имею, почему это происходит в вашем случае. На самом деле этого не должно произойти. Но проблема находится в .owl-stage-outer элементе, потому что при каждом изменении высоты слайда ( style="height: xxx" ) удаляется и переносится в этот div. Поэтому owl carousel прыгает вверх и вниз, потому что height:xxx изменяет каждый переключатель изображения, пока не будут загружены все изображения.

Я не уверен, но вы могли бы исправить это также с помощью обновленной конфигурации. Отрегулируйте authHeight или lazyLoad они — моя первая интуиция, потому что это происходит только до тех пор, пока все изображения не будут повернуты один раз. Если ничего не помогает, используйте исправление, указанное ниже:

 .owl-carousel .owl-stage-outer {
    height: 100% !important;
}
  

Форсирование такой высоты и особенно с !important — это плохо … но, возможно, у кого-то другого есть лучшее решение или исправление. Но даже мысль лучше, чем ничего.