垂直猫头鹰旋转木马滑块

Question

我在网站中使用猫头鹰旋转木插件，我想对此创建一个垂直滑块。部分的整体布局看起来像这样。我也在使用引导程序。但是，创建一个垂直滑块，因为图像中的部分非常棘手，我需要您的帮助。

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