Question

我在我的网站上使用Owl Carousel插件，我想创建一个垂直滑块。 Overall layout部分看起来像这样。我也使用Bootstrap。但是，在图像中创建垂直滑块非常棘手，我需要你的帮助。

＆＃13;

$(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,
  });
});

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

Answer 1

我无法让你的代码正常工作，所以我做了一个快速设置。

将您想要的图像放在右侧display: block;，这将使它们彼此相对坐下。

我希望这会有所帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

垂直猫头鹰旋转木马滑块

1 个答案: