Question

我正在使用owlCarousel2插件（https://owlcarousel2.github.io/OwlCarousel2/demos/demos.html）。一切都很完美，但问题在于内容。我有三张内容幻灯片。两边的长度相同，但在最后一张幻灯片中，内容更多，这就是我的前两张幻灯片没有显示在中心的原因。我需要将所有滑块显示在中间。

＆＃13;

$(document).ready(function() {
  $("#owl-example").owlCarousel({
      navigation : true, // Show next and prev buttons
      slideSpeed : 300,
      margin:10,
      paginationSpeed : 400,
      autoplay:false,
      items : 1, 
      itemsDesktop : false,
      itemsDesktopSmall : false,
      itemsTablet: false,
      itemsMobile : false,
      loop:true,
      nav:true,
      navText: ["<i class='fa fa-angle-left' aria-hidden='true'></i>","<i class='fa fa-angle-right' aria-hidden='true'></i>"]
  });
});

＆＃13;

 
.left_50{
  width: 600px;
  margin: 0 auto;
}
#owl-example{
  border: 1px solid #000;
}
body .owl-nav div{
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
border:1px solid #000;
width: 40px;
height: 40px;
border-radius: 50%;
}
body .owl-prev{
  left: 0;
  display: flex;
}
body .owl-next{
  right: 0;
  display: flex;
}
body .owl-prev i, body .owl-next i{
  margin: auto;
}

#owl-example .owl-item{
  box-sizing: border-box;
  padding: 40px;
  text-align: center;
}
#owl-example .owl-item p{
  font-size: 25px;
}

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" />
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css">
    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
  
  <div class="left_50">
<div id="owl-example" class="owl-carousel">

 <div class="owl_text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem</p> </div>
 <div class="owl_text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem.ipsum</p> </div>
  <div class="owl_text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p> </div>
</div>
</div>

＆＃13;

Answer 1

您可以使用owl item div上面的display: flex;和align-items: center;

.owl-stage {
    display: flex;
    align-items: center;
}

比工作正常

演示：https://www.w3schools.com/code/tryit.asp?filename=FNM14PUMZMNU

如何在中心显示owlCarousel2滑块内容？

1 个答案: