垂直猫头鹰旋转木马滑块

Question

我在我的网站中使用 Owl Carousel 插件，我想用它创建一个垂直滑块。 Overall layout 的部分看起来像这样。我也在使用引导程序。然而，创建一个如图中的垂直滑块是相当棘手的部分，我需要你的帮助。

$(function() {
  var owl = $('.history .owl-carousel');
  owl.owlCarousel({
    stagePadding: 0,
    margin: 15,
    loop: true,
    dots: false,
    nav: true,
    navText: [
      "<i class='fa fa-angle-up'></i>",
      "<i class='fa fa-angle-down'></i>"
    ],
    items: 3,
  });
});

.box_area {
  width: 100%;
  margin: 10px auto 50px auto;
  font-size: 0px;
  letter-spacing: 0px;
  word-spacing: 0px;
}

.box_area:after {
  display: block;
  content: "";
  clear: both;
}

.leftarea {
  height: 500px;
}

.rightarea {
  height: 500px;
}

.rightarea img {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="history">
  <div class="container">
    <h2 class="section_title">My Performance History</h2>
    <div class="row box_area">
      <div class="col-md-9 leftarea">
        <img class="leftarea_img" src="">
      </div>
      <div class="col-md-3 owl-carousel rightarea">
        <div class="item">
          <img class="rightarea_img" src="">
        </div>
        <div class="item">
          <img class="rightarea_img" src="">
        </div>
        <div class="item">
          <img class="rightarea_img" src="">
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

我无法让您的代码正常工作，因此我进行了快速设置。

在右侧为您想要的图像添加display: block;，这将使它们位于彼此下方。

我希望这会有所帮助。

.img-list img {
  display: block;
  padding: 8px;
}

<div style="float: left;">
  <img src="http://via.placeholder.com/350x150" />
</div>
<div class="img-list">
  <img style="max-width: 20%;" src="http://via.placeholder.com/350x150" />
  <img style="max-width: 20%;" src="http://via.placeholder.com/350x150" />
</div>