javascript - 如何在猫头鹰旋转木马的屏幕上显示上一个和下一个 slider ？

Question

我正在使用 owl carousel 2 插件 ( https://owlcarousel2.github.io/OwlCarousel2/demos/demos.html )。它工作完美。我只想更改 slider 的宽度，以便前一个 slider 和下一个 slider 的一半显示在屏幕上。

建议的答案 (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 并将边距设置得更大。