貓頭鷹旋轉木馬2導航

Question

嗨，我正在使用貓頭鷹旋轉木馬版本2，無法找到一個例子，把導航的左右輪廓或箭頭的兩側的導航。你怎麼做呢？

Answer 1

我只是做這個昨天:)

首先確保資產淨值在配置

https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

$('#_samewidth_images').owlCarousel({ 
     margin:10, 
     autoWidth:false, 
     nav:true, 
     items:4, 
     navText : ['<i class="fa fa-angle-left" aria-hidden="true"></i>','<i class="fa fa-angle-right" aria-hidden="true"></i>'] 
    }) 

這將注入控制到DOM被打開，看到

https://owlcarousel2.github.io/OwlCarousel2/docs/api-classes.html

<div class="owl-carousel owl-theme owl-loaded"> 
    <div class="owl-stage-outer"> 
     <div class="owl-stage"> 
      <div class="owl-item">...</div> 
      <div class="owl-item">...</div> 
      <div class="owl-item">...</div> 
     </div> 
    </div> 
    <div class="owl-controls"> 
     <div class="owl-nav"> 
      <div class="owl-prev">prev</div> 
      <div class="owl-next">next</div> 
     </div> 
     <div class="owl-dots"> 
      <div class="owl-dot active"><span></span></div> 
      <div class="owl-dot"><span></span></div> 
      <div class="owl-dot"><span></span></div> 
     </div> 
    </div> 
</div> 

下一頁使用CSS來定位的下一步和上控制，這是我用什麼：

.owl-prev { 
    width: 15px; 
    height: 100px; 
    position: absolute; 
    top: 40%; 
    margin-left: -20px; 
    display: block!IMPORTANT; 
    border:0px solid black; 
} 

.owl-next { 
    width: 15px; 
    height: 100px; 
    position: absolute; 
    top: 40%; 
    right: -25px; 
    display: block!IMPORTANT; 
    border:0px solid black; 
} 
.owl-prev i, .owl-next i {transform : scale(1,6); color: #ccc;} 

對於我的圖標我用字體真棒，但你可以使用類似的事情。在javascript代碼中注意navText，這是您放置自定義HTML的位置。我想你也可以使用一個圖像（或者把它放在.owl-next和.owl-prev div的背景中。注意我使用transform來使我的箭頭更高。