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

Question

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

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

谢谢您的建议！

Answer 1

您可以首先尝试像这样调整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>