сова карусель переход между изображениями - PullRequest
Новая
       11

сова карусель переход между изображениями

0 голосов
/ 21 марта 2019

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

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

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

autoHeight: true, поле: 1, animateOut: 'fadeOut', nav: 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>

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

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

1 Ответ

0 голосов
/ 22 марта 2019

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

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

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

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

...