如何在中心显示猫头鹰轮播导航？

Question

我正在使用内容幻灯片的owl.carousel.js插件。滑块正在工作，但我需要在中心的导航按钮。

我试过

我将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

删除此

body .owl-nav{
  position: relative;
}

Answer 2

编辑.owl-nav的位置，然后给每个圆圈按钮一个白色背景。

＆＃13;

＆＃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 {
  position: absolute;
  top: calc(50% - 21px);
  width: 107%;
  left: -21px;
}

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;
  background: #fff;
}

body .owl-next {
  right: 0;
  display: flex;
  background: #fff;
}

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 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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

改变一些风格和中提琴：

body .owl-nav{
  position: initial;
}

body .owl-nav div{
position: absolute;
top: 40%;
border:1px solid #000;
width: 40px;
height: 40px;
border-radius: 50%;
}

body .owl-prev{
  left: -20px;
  display: flex;
  background-color:white;
}

body .owl-next{
  right: -20px;
  display: flex;
  background-color:white;
}

Codepen链接： https://codepen.io/anon/pen/eyzaPP

Answer 4

试试这个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/

谢谢！