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

您可能遇到的问题是，包含div类的owl-carousel未正确关闭，请在类名后添加结束引号。此外，您可能没有为给定版本使用正确的轮播js / css文件。此外，如果您未在navTaxt选项属性中提供任何文字，则只会看到2个小按钮，用于上一个和下一个导航。使用您的代码模板查看下面的工作代码。

＆＃13;

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

＆＃13;

<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>

＆＃13;

你如何将Owl Carousel的导航移到他们的默认div之外？

1 个答案: