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

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，添加center：true，并设置更大的边距。