How to move owl carousel slider arrow bottom to dots

Question

How to move owl carousel arrow from

to

I need look like :

Answer 1

Add this rule to your css file:

.owl-carousel .owl-dots

    {
        display: none;
    }

Answer 2

you are looking for something like this ?

demo

source

.carousel-wrap {
 width: 1000px;
 margin: auto;
 position: relative;
}
.owl-carousel .owl-nav{
 overflow: hidden;
 height: 0px;
}

.owl-theme .owl-dots .owl-dot.active span, 
.owl-theme .owl-dots .owl-dot:hover span {
  background: #2caae1;
 }


 .owl-carousel .item {
   text-align: center;
}
.owl-carousel .nav-btn{
  height: 47px;
  position: absolute;
  width: 26px;
  cursor: pointer;
  top: 100px !important;
 }

 .owl-carousel .owl-prev.disabled,
 .owl-carousel .owl-next.disabled{
  pointer-events: none;
  opacity: 0.2;
 }

  .owl-carousel .prev-slide{
   background: url(nav-icon.png) no-repeat scroll 0 0;
    left: -33px;
  }
  .owl-carousel .next-slide{
  background: url(nav-icon.png) no-repeat scroll -24px 0px;
  right: -33px;
 }
 .owl-carousel .prev-slide:hover{
   background-position: 0px -53px;
 }
 .owl-carousel .next-slide:hover{
 background-position: -24px -53px;
}

 span.img-text {
  text-decoration: none;
  outline: none;
  transition: all 0.4s ease;
 -webkit-transition: all 0.4s ease;
 -moz-transition: all 0.4s ease;
 -o-transition: all 0.4s ease;
 cursor: pointer;
 width: 100%;
 font-size: 23px;
 display: block;
 text-transform: capitalize;
}
 span.img-text:hover {
  color: #2caae1;
 }

$('.your-class').owlCarousel({
    dots: false,
    nav: true,
    navText: ["<i class='fa fa-long-arrow-left'></i>","<i class='fa fa- 
    long-arrow-right'></i>"],

});

Answer 3

I think you can control them through by Position...

.owl-next,
.owl-prev {
      position: absolute;
      bottom: 15px;
}

.owl-next {
    right: 45%;
}
.owl-prev {
    left: 45%;
}