owl carousel half part (next-prev) to navigate

Question

I can't manage my owl carousel. First, I can't fix the height. Second, I tried to have a part of the next and the previous slide (I find the solution) but I want to make them clikable to navigate between the slides, can you help me ? Third, I would like to put the navigation "buttons" on the slides (like the bootstrap carousel). Do you know how can I do that ?

I'm using bootstrap with wordpress. (sorry for my english)

What is now : The try

What i'm trying to do :The result

Thanks in advance ! :D

Here my code :

jQuery(document).ready(function($) {
                $('.owl-carousel').owlCarousel({
                  autoHeight : true,
       transitionStyle:"fade",
         margin: 46,
         loop: true,
         items: 1,
         stagePadding: 200,
         autoplay:true,
         autoplayTimeout:5000,
         autoplayHoverPause:false,
         nav: true,
         rewind: false,
       });
             });

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
  height: 3px;
  width: 48px;
  background-color: #FFF;
  border: 0px;
}
.owl-theme .owl-dots .owl-dot span {
  width: 48px;
  height: 3Px;
  margin: 5px 7px;
  background: #ffffff;
  display: block;
  -webkit-backface-visibility: visible;
  transition: opacity .2s ease;
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    height: 3px;
    width: 48px;
    background-color: #000;
    border: 0px;
}
.carousel-ad{
  height: 530px;
}
.owl-wrapper-outer{
  height: 530px;
}
.carousel-control-prev, .carousel-control-prev{
  z-index: 1;
}

<div class="row justify-content-center row-title-product">
    <div class="col-sm-12 ">
     <div class="owl-wrapper-outer">
      <div class="loop owl-carousel owl-theme carousel-ad">
       <div>
         <img class="d-block w-100" src="../../wp-content/uploads/slide1.jpeg" alt="First slide">
       </div>
       <div>
         <img class="d-block w-100" src="../../wp-content/uploads/slide2.jpg" alt="Second slide">
       </div>
       <div>
         <img class="d-block w-100" src="../../wp-content/uploads/slide3.jpeg" alt="Third slide">
       </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
       <span class="carousel-control-prev-icon" aria-hidden="true"></span>
       <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
       <span class="carousel-control-next-icon" aria-hidden="true"></span>
       <span class="sr-only">Next</span>
      </a>
     </div>
    </div>
   </div>