javascript - 猫头鹰旋转木马上带有大项的滑块

我有一个要加载3个或更多图像的滑块。该内容是动态的，但我需要始终使第一项具有较大的尺寸，如下所示：



我该如何使用Owl-Carousel？我使用固定大小来执行此操作，但是当用户加载新图像时，它不再起作用并且看起来很糟糕。

感谢您的建议！

最佳答案

您可以先尝试调整CSS，如下所示：

.owl-carousel{
    display: flex;
    flex-direction: row;
    max-width:100%;
    background-color: #a49e9e;
    height: 100%;
    justify-content: space-between;
}

.size625x488{
    width: 625px;
    height: 488px;
    background-color: #e7e7e7;
    margin: 1%;
}

._2ndColumn{
    width: 50%;
    background-color: #e7e7e7;
    margin: 1%;
    max-height: 100%;
}

.size462x216_1{
    background-color: #696868;
    width: 462px;
    height: 216px;
    margin: 1%;
}

.size462x216_2{
    background-color: #696868;
    width: 462px;
    height: 216px;
    margin: 1%;
    margin-top: 8%;
}

和你的HTML是这样的

<section class="wrapper">
  <div class="owl-carousels owl-themes" id="home-slider2">
    <div class="size625x488"> </div>
    <div class="_2ndColumn">
      <div class="size462x216_1"> </div>
      <div class="size462x216_2"> </div>
    </div>
  </div> <!--Display flex makes it easier to style-->
</section>