如何在div以外的地方獲得貓頭鷹傳送帶導航

Question

我正在嘗試爲我的網站製作應用程序傳送帶，但我被困在這部分我沒有收到它如何讓導航按鈕粘到兩邊。我使用貓頭鷹轉盤導航鍵

這裏是如何看起來像現在的Next和Prev按鈕出來的div

的不走我多麼希望它

代碼

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

這裏的項目，如果你想嘗試 LINK TO PROJECT

Answer 1

您可以絕對/固定位置（任何你想去的地方或）資產淨值向左和向右的CSS - 你不需要觸摸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. 
    */ 
} 

編輯：添加一些HTML（外#recent_work）和綁定它們作爲貓頭鷹轉盤導航控制。

HTML（你想要的任何東西）：

<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'); 
}); 

現在你可以旋轉木馬外放置它們：

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

Answer 2

如果我理解正確的，你想要容器或瀏覽器窗口邊緣的上一個/下一個按鈕。

此更改的基礎知識在於從.owl-carousel中刪除relative定位，因爲我們需要absolute相對於外部容器的定位。

請注意，一切似乎都應該如其運作，但不能保證更改定位不會影響其他插件功能。

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