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

Solution 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;
}

Solution 2

Try this

$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 10,
  nav: true,
  dotsContainer: '#myDots',
  navContainer: '#MyNavs'
})

in html

<div id="myDots" class="owl-dots"></div>
<div id="myNavs" class="owl-nav"></div>

Solution 3

If I understand correctly, you want the prev/next buttons on the edges of your container or browser window.

The basics of this change lie in removal of relative positioning from .owl-carousel since we need absolute positioning relative to the outer containers.

Note, everything seems to be functioning as it should, but there are no guarantees that changing the positioning won't affect other plugin functionality.

$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 10,
  nav: true,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 3
    }
  }
})

.owl-carousel.owl-loaded {
  width: 400px;
  margin: 0 auto;
  position: static;
}
.owl-prev {
  position: absolute;
  left: 0;
  margin: 0;
  height: 80px;
  text-align: center;
  line-height: 80px;
  transform: translateY(-50%);
}
.owl-next {
  position: absolute;
  right: 0;
  margin: 0;
  height: 80px;
  text-align: center;
  line-height: 80px;
  transform: translateY(-50%);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.min.css" rel="stylesheet" />
<div class="owl-carousel owl-theme">
  <div class="item">
    <h4>1</h4>
  </div>
  <div class="item">
    <h4>2</h4>
  </div>
  <div class="item">
    <h4>3</h4>
  </div>
  <div class="item">
    <h4>4</h4>
  </div>
  <div class="item">
    <h4>5</h4>
  </div>
  <div class="item">
    <h4>6</h4>
  </div>
  <div class="item">
    <h4>7</h4>
  </div>
  <div class="item">
    <h4>8</h4>
  </div>
  <div class="item">
    <h4>9</h4>
  </div>
  <div class="item">
    <h4>10</h4>
  </div>
  <div class="item">
    <h4>11</h4>
  </div>
  <div class="item">
    <h4>12</h4>
  </div>
</div>

Comments

[Abdul Sadik Yalcin]

Do you have a url?

[O-mkar]

Here is the demo drive.google.com/file/d/0B2csGr9uKp1DeFAyaTl1cEhPUms/…

[O-mkar]

Thank Serg for your time this didn't work for me. you can find my project here drive.google.com/file/d/0B2csGr9uKp1DeFAyaTl1cEhPUms/… let me know what i'm doing wrong

[Abdul Sadik Yalcin]

Next time please make a fiddle on jsfiddle.net so it will be easier for us to help. I've changed my answer... Use your custom buttons for navigation and hide the owl carousel navigations.