jquery - 如何在中心显示 Owl Carousel 导航？

Question

我正在为内容幻灯片使用 owl.carousel.js 插件。 slider 可以正常工作，但我需要在中间放置导航按钮。

我试过了

我设置了 position: relative上课.owl-nav和 position: absolute;top;top: 50%;上课.owl-nav div .

另外，我设置了.owl-prev{left: 0;} .owl-next{right: 0;}

我正在使用 display: flex;因为我想在圆心显示导航箭头。

但是还是不能在中心显示导航。你能帮我看看我错在哪里吗？

$(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>"]
  });
});

.left_50{
  width: 600px;
  margin: 0 auto;
}
#owl-example{
  border: 1px solid #000;
}
body .owl-nav{
  position: relative;
}

body .owl-nav div{
position: absolute;
top: 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;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet"/>
<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</p> </div>
  <div class="owl_text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p> </div>
  <div class="owl_text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p> </div>
  <div class="owl_text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p> </div>
</div>
</div>

我得到这样的输出

我需要这样的输出

Answer 1

试试这个 CSS

.owl-carousel {
    position: relative;
}
.owl-next, .owl-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
.owl-next {
    right: 0;
    display: flex;
}
.owl-prev{
    left: 0;
    display: flex;
}

这是我应用它的网站 FYR:http://bhadbhabie.com/

谢谢!