How to get owl carousel navigation outside the div

Question

I was trying to make app carousel for my website but I'm stuck at this part I'm not getting it how do I get the nav buttons stick to the sides. i'm using owl carousel nav buttons

Here is how it looks like now the next and prev buttons doesn't go out of div

How i want it

Code

<section id="works">
   <div class="container-fluid">
      <div class="row">
         <div class="col-md-12">
            <div class="works-slider animated fadeInUp owl-carousel owl-theme owl-loaded">
               <div class="owl-stage-outer">
                  <div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); transition: 0.25s; width: 2102.4px;">
                     <div class="owl-item active" style="width: 155.2px; margin-right: 20px;">
                        <div class="item-gal">
                           <a class="owl-prev"><img src="img/app-pics/1.png" alt=""></a>
                        </div>
                     </div>
                     <div class="owl-item active" style="width: 155.2px; margin-right: 20px;">
                        <div class="item-gal">
                           <a class="owl-prev"><img src="img/app-pics/5.png" alt=""></a>
                        </div>
                     </div>
                     <div class="owl-item active" style="width: 155.2px; margin-right: 20px;">
                        <div class="item-gal">
                           <a href="img/app-pics/9.png"><img src="img/app-pics/9.png" alt=""></a>
                        </div>
                     </div>
                     <div class="owl-item active" style="width: 155.2px; margin-right: 20px;">
                        <div class="item-gal">
                           <a href="img/app-pics/8.png"><img src="img/app-pics/8.png" alt=""></a>
                        </div>
                     </div>
                     <div class="owl-item active" style="width: 155.2px; margin-right: 20px;">
                        <div class="item-gal">
                           <a href="img/app-pics/2.png"><img src="img/app-pics/2.png" alt=""></a>
                        </div>
                     </div>
                     <div class="owl-item" style="width: 155.2px; margin-right: 20px;">
                        <div class="item-gal">
                           <a href="img/app-pics/6.png"><img src="img/app-pics/6.png" alt=""></a>
                        </div>
                     </div>
                     <div class="owl-item" style="width: 155.2px; margin-right: 20px;">
                        <div class="item-gal">
                           <a href="img/app-pics/7.png"><img src="img/app-pics/7.png" alt=""></a>
                        </div>
                     </div>
                     <div class="owl-item" style="width: 155.2px; margin-right: 20px;">
                        <div class="item-gal">
                           <a href="img/app-pics/4.png"><img src="img/app-pics/4.png" alt=""></a>
                        </div>
                     </div>
                     <div class="owl-item" style="width: 155.2px; margin-right: 20px;">
                        <div class="item-gal">
                           <a href="img/app-pics/3.png"><img src="img/app-pics/3.png" alt=""></a>
                        </div>
                     </div>
                     <div class="owl-item" style="width: 155.2px; margin-right: 20px;">
                        <div class="item-gal">
                           <a href="img/app-pics/10.png"><img src="img/app-pics/10.png" alt=""></a>
                        </div>
                     </div>
                     <div class="owl-item" style="width: 155.2px; margin-right: 20px;">
                        <div class="item-gal">
                           <a href="img/app-pics/11.png"><img src="img/app-pics/11.png" alt=""></a>
                        </div>
                     </div>
                     <div class="owl-item" style="width: 155.2px; margin-right: 20px;">
                        <div class="item-gal">
                           <a href="img/app-pics/12.png"><img src="img/app-pics/12.png" alt=""></a>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="owl-controls">
                  <div class="owl-nav">
                     <div class="owl-prev" style="">prev</div>
                     <div class="owl-next" style="">next</div>
                  </div>
                  <div class="owl-dots" style="display: none;"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>

HERE IS THE PROJECT IF YOU WANT TO TRY LINK TO PROJECT

Answer 1

You can absolutely/fix position the navs to the left and to the right (or where ever you want) with CSS - you don't need to touch the html.

.owl-nav div {
  position: fixed;
  top: 50%
  /*
  height: 20px;
  width: 20px;
  */
}

.owl-prev {
  left: 5px;
  /**
   * margin-top: -10px;
   * negative margin-top half the height so its centered.
   */
}

.owl-next {
  right: 5px;
  /**
   * margin-top: -10px;
   * negative margin-top half the height so its centered.
   */
}

Edit: Add some html (outside #recent_work) and bind them as navigation controls for owl carousel.

HTML (anything you want):

<div id="next-slide" class="my-controls-btns">
  <i class="fa fa-chevron-right"></i>
</div>
<div id="prev-slide" class="my-controls-btns">
  <i class="fa fa-chevron-left"></i>
</div>

JS:

document.getElementById('next-slide').addEventListener('click', function(){
   $('.works-slider').trigger('next.owl.carousel');
});

document.getElementById('prev-slide').addEventListener('click', function(){
   $('.works-slider').trigger('prev.owl.carousel');
});

And now you can position them outside the carousel:

.my-controls-btns {
  position: absolute;
  top: 50%;
  color: black;
  height: 20px;
  width: 20px;
}

#prev-slide {
  left: 5px;
  margin-top: -10px;
}

#next-slide {
  right: 5px;
  margin-top: -10px;
}