猫头鹰旋转木马上第一项大的滑块答案

【问题标题】：Slider with first item big on owl-carousel猫头鹰旋转木马上第一项大的滑块
【发布时间】：2018-09-18 19:26:18
【问题描述】：

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

我怎么能用 Owl-Carousel 做到这一点？我用固定尺寸来做，但是当用户加载新图像时，它不再起作用并且看起来很糟糕。

感谢您的建议！

【问题讨论】：

【解决方案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>

【讨论】：