猫头鹰旋转木马滑动滑梯让元素更高

Question

enter image description here

正在滚动的传入幻灯片会更改高度，但随后会恢复到应有的高度，仅在滚动时。

$(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>

使用 min-height 和 max-height 也不起作用

Answer 1

$(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>