如何将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>