How do you move Owl Carousel's navigation outside of their default divs?

Question

I'm just trying to control where the navigation goes. My html looks like this:

<!-- 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; ?>

And my javascript looks like this:

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

However, on the front-end, I do not see my navigation. I'm using the latest version of Owl Carousel too.

Answer 1

The problem you might be having is that your div containing the owl-carousel class is not properly closed, add the end quotes after class names. Additionally it might be that you are not using the correct carousel js/css files for a given version. Also if you don't provide any text in the navTaxt options property, you will only see 2 small buttons for previous and next navigation. Take a look the working code below using your code template.

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