How to display the owl Carousel navigation in the center?

Question

I am using the owl.carousel.js plugin for the content slide. The slider is working but I need navigation buttons in the center.

I tried

I set the position: relative to the class .owl-nav and position: absolute;top;top: 50%; to the class .owl-nav div.

Also, I set .owl-prev{left: 0;} .owl-next{right: 0;}

I am using display: flex; because I want to display the navigation arrows in the center of the circle.

But still not able to display the navigation in the center. Can you help me where I am wrong?

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

I am getting the output like this

I need output like this

Answer 1

try out this 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;
}

here is the site i applied it FYR:http://bhadbhabie.com/

Thanks !

Answer 2

Changing some style and viola:

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 link: https://codepen.io/anon/pen/eyzaPP

Answer 3

Edited the positioning of .owl-nav and then gave the circle buttons a white background each.

$(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: 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;
}

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

Remove this

body .owl-nav{
  position: relative;
}