如何在猫头鹰轮播中在屏幕上显示上一个和下一个滑块一半？

Question

我正在使用owl carousel 2插件（https://owlcarousel2.github.io/OwlCarousel2/demos/demos.html）。运行良好。我只想更改滑块的宽度，以便上一个滑块和下一个滑块的一半显示在屏幕上。

建议的答案（Oleg Nurutdinov）正在工作，但不能100％工作。因为我使用margin：300并且得到的输出是这样的：https://prnt.sc/k5nptg

我需要这样的输出

$(document).ready(function(){
  $(".owl-carousel").owlCarousel({
  	center: true,
    stagePadding: 0,
   loop:true,
    margin:300,
    nav:true,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
        },
        600:{
            items:1,
        },
        1000:{
            items:1,
        }
    }
  });
});

.display_table{display: table;}
.table_cel{display: table-cell;vertical-align: middle;}
.home_testimonial{background-color: #fff;}
.testi_white_box{
background-color: #fff;
box-sizing: border-box;
padding: 30px;
width: 80%;
margin: auto;
box-shadow: 0 0 14px rgba(0,0,0,.1);

}
.testi_white_box p{font-size: 18px;padding-bottom: 30px;}
.testi_pic{width: 65px;height: 65px;border-radius: 50%;}
.testi_pic img{
border-radius: 50%;
height: 100%;
min-height: 65px;
}

.testi_names{padding: 15px 15px 0 15px;}
.testi_names h2{font-size: 22px;color:#ee220c;}
.testi_names p{font-size: 16px;}
.owl-stage{margin: 30px;}

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">

<section class="home_testimonial">
   <div class="equal_padding">
      <div class="">
         <div class="home_testimonial_slider">
            <div class="owl-carousel owl-theme">
                <div class="item">
                  <div class="testi_white_box">
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
                     <div class="testi_profile display_table">
                     <div class="testi_pic table_cel"><img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-512.png" class="rounded-circle"></div>
                     <div class="testi_names table_cel">
                        <h2>Lorem ipsum dolor</h2>
                        <p>consectetur adipisicing elit</p>
                     </div>
                     </div>
                  </div>

                </div>
                <div class="item">
                  <div class="testi_white_box">
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse</p>
                     <div class="testi_profile display_table">
                     <div class="testi_pic table_cel"><img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-512.png" class=""></div>
                     <div class="testi_names table_cel">
                        <h2>Lorem ipsum dolor</h2>
                        <p>consectetur adipisicing elit</p>
                     </div>
                     </div>
                  </div>
                </div>
                <div class="item">
                  <div class="testi_white_box">
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
                     <div class="testi_profile display_table">
                     <div class="testi_pic table_cel"><img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-512.png" class=""></div>
                     <div class="testi_names table_cel">
                        <h2>Lorem ipsum dolor</h2>
                        <p>consectetur adipisicing elitt</p>
                     </div>
                     </div>
                  </div>
                </div>
            </div>
         </div>
         </div>
   </div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

Answer 1

我不确定，但是看起来这个例子正是您所需要的。 https://owlcarousel2.github.io/OwlCarousel2/demos/center.html

UPD

现在我尝试由我自己做，通过此设置，它的工作原理就像您想要的一样

<script>
$(document).ready(function(){
    $(".owl-carousel").owlCarousel({
        center: true,
        stagePadding: 0,
        loop:true,
        margin:100,
        nav:true,
        responsiveClass:true,
        responsive:{
            0:{
                items:1,
            },
            600:{
                items:1,
            },
            1000:{
                items:2,
            }
        }
    });
});

我的更改是将项目设置为2，添加中线：true，并设置更大的边距。