title: owl carousel transition between images
body: <p>I'm using owl carousel for images on a page. During the transition the images jump, like they disapppearm shrink height on the screen. </p>
  
  <p>all images are all the same size, this js at the bottom of the page </p>
  
  <pre><code>.carousel-main').owlCarousel({items:1,loop:true,lazyLoad:true,transitionStyle:"fade",autoplay:true,autoplayTimeout:4000,
  </code></pre>
  
  <p>autoHeight:true,margin:1,animateOut:'fadeOut',nav:true,dots:false,navText: ['',''],})</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row align-items-center my-1"&gt;&lt;div class="col-12 col-carousel"&gt;&lt;div class="owl-carousel carousel-main"&gt;&lt;div&gt;&lt;img class="owl-lazy" data-src="https://designedathome.com/carousel/1.jpg" alt="stuffed snowman"&gt;&lt;/div&gt;&lt;div&gt;&lt;img class="owl-lazy" data-src="https://designedathome.com/carousel/2.jpg" alt="reindeer and snowman pillow"&gt;&lt;/div&gt;&lt;div&gt;&lt;img class="owl-lazy" data-src="https://designedathome.com//carousel/3.jpg" alt="mini houses"&gt;&lt;/div&gt;&lt;div&gt;&lt;img class="owl-lazy" data-src="https://designedathome.com/carousel/4.jpg" alt="silver sheep picture"&gt;&lt;/div&gt;&lt;div&gt;&lt;img class="owl-lazy" data-src="https://designedathome.com//carousel/5.jpg" alt="By the Sea"&gt;&lt;/div&gt;&lt;div&gt;&lt;img class="owl-lazy" data-src="https://designedathome.com/carousel/6.jpg" alt="table w globe lights"&gt;&lt;/div&gt;&lt;div&gt;&lt;img class="owl-lazy" data-src="https://designedathome.com/carousel/7.jpg" alt="draperies"&gt;&lt;/div&gt;&lt;div&gt;&lt;img class="owl-lazy" data-src="carousel/8.jpg" alt="living room w lamp"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://designedathome.com/" rel="nofollow noreferrer">a link to the page it's on</a></p>
  
  <p>Do you need anymore info?</p>