如何將Owl Carousel的導航移動到默認div之外？

Question

我只是想控制導航的位置。我的HTML看起來像這樣：

<!-- Testimonials --> 
     <?php if(have_rows('testimonials')): ?> 

      <div class="testimonial-header"> 
       <h5>Testimonials</h5> 
       <div class="testimonial-controls owl-theme"> 
        <div class="owl-controls"> 
         <div id="customNav" class="owl-nav"></div> 
        </div> 
       </div><!-- end testimonial-controls --> 
      </div><!-- end testimonial-header --> 

      <div class="owl-carousel owl-theme testimonials"> 

      <?php while(have_rows('testimonials')): the_row(); 

       // vars 
       $testimonial = get_sub_field('testimonial'); 
       $author = get_sub_field('author'); 
       ?> 

       <div class="testimonial-item"> 
        <?php if($testimonial): ?> 
         <div class="testimonial-message"> 
          <?php echo $testimonial; ?> 
         </div> 
         <div class="testimonial-author"> 
          <p><?php echo $author; ?></p> 
         </div> 
        <?php endif; ?> 
       </div> 

      <?php endwhile; ?> 

      </div> <!-- end testimonials --> 
     <?php endif; ?> 

而且我的JavaScript看起來像這樣：

$('.testimonials').owlCarousel({ 
    items: 1, 
    loop:false, 
    margin:0, 
    nav:true, 
    navContainer: '#customNav', 
    navText: [], 
    dots: false, 
}); 

然而，在前端，我沒有看到我的導航。我也使用最新版本的貓頭鷹旋轉木馬。

Answer 1

您可能遇到的問題是您的div包含owl-carousel類未正確關閉，請在類名稱後添加結尾引號。另外，這可能是因爲您沒有爲給定版本使用正確的輪播js/css文件。另外，如果您在navTaxt選項屬性中未提供任何文本，則只會看到2個用於上一個和下一個導航的小按鈕。使用您的代碼模板，查看下面的工作代碼。

$('.testimonials').owlCarousel({ 
 
    items: 1, 
 
    loop:false, 
 
    margin:0, 
 
    nav:true, 
 
    navContainer: '#customNav', 
 
    navText: ['pr', 'nx'], 
 
    dots: false, 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.css" rel="stylesheet"/> 
 

 

 
<script src="https://code.jquery.com/jquery-3.2.1.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script> 
 

 

 

 
<div class="owl-theme"> 
 
    <div class="owl-controls"> 
 
      <div id="customNav" class="owl-nav"></div> 
 
    </div> 
 
</div> 
 

 
<div class="testimonials owl-carousel owl-theme"> 
 
    <div class="owl-item">Blah 1</div> 
 
    <div class="owl-item">Blah 2</div> 
 
    <div class="owl-item">Blah 3</div> 
 
</div>