Owl Carouselのナビゲーションをデフォルトディビジョンの外に移動するにはどうすればよいですか？

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

しかし、フロントエンドには、私は私のナビゲーションが表示されません。私もOwl Carouselの最新バージョンを使用しています。

Answer 1

owl-carouselクラスを含むdivが正しく閉じられていないという問題があります。クラス名の後ろに最後の引用符を追加してください。さらに、特定のバージョンで正しいカルーセル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>