Vertical Owl Carousel Slider

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>