Search code examples
javascripthtmljquerycssowl-carousel

Owl carousel swiping slides makes element taller

enter image description here

enter image description here

The incoming slides being scrolled change height, but then snap back to the height the are supposed to be, only while scrolling.

$(document).ready(function() {

  $('.owl-carousel').owlCarousel({
    loop: true,
    items: 4,
    responsiveClass: true,
    responsive: {
      0: {
        items: 4,
        nav: true
      },
      600: {
        items: 3,
        nav: false
      },
      1000: {
        items: 5,
        nav: true
      }
    }
  })
});
.slide {
  width: 240px;
  height: 350px;
}
<div class="container">
  <div class="owl-carousel owl-theme">
    <div class="slide" style="background-color: black;"> Your Content </div>
    <div class="slide" style="background-color: red;"> Your Content </div>
    <div class="slide" style=" background-color: green;"> Your Content </div>
    <div class="slide" style=" background-color: blue;"> Your Content </div>
    <div class="slide" style=" background-color: purple;"> Your Content </div>
    <div class="slide" style="background-color: orange;"> Your Content </div>
    <div class="slide" style="background-color: black;"> Your Content </div>
  </div>
</div>

Using min-height and max-height did not work either

Solution 

  • $(document).ready(function() {

  $('.owl-carousel').owlCarousel({ 
    //Autoplay
    autoPlay : true,
    goToFirst : true,
    goToFirstSpeed : 1000,
    loop: true,
    items: 4,
    responsiveClass: true,
    responsive: {
      0: {
        items: 4,
        nav: true
      },
      600: {
        items: 3,
        nav: false
      },
      1000: {
        items: 5,
        nav: true
      }
    }
  })
});
    .slide {
  width: 240px;
  height: 350px;
}
    <!-- Basic stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css">
 
<!-- Default Theme -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.css">
 
<!-- You can use latest version of jQuery  -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
 
<!-- Include js plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>
<div class="container">
  <div class="owl-carousel owl-theme">
    <div class="slide" style="background-color: black;"> Your Content </div>
    <div class="slide" style="background-color: red;"> Your Content </div>
    <div class="slide" style=" background-color: green;"> Your Content </div>
    <div class="slide" style=" background-color: blue;"> Your Content </div>
    <div class="slide" style=" background-color: purple;"> Your Content </div>
    <div class="slide" style="background-color: orange;"> Your Content </div>
    <div class="slide" style="background-color: black;"> Your Content </div>
  </div>
</div>