使点与jQuery Owl Carousel中的函数一起使用

Question

jQuery Owl Carousel有一些问题。

我正在努力使功能发挥作用。 我试图在其他答案中找到解决方案，并尝试了不同的方法。 尝试使用触发器和Slideby，但无法解决。

如何使点与我的功能一起使用？

请帮助学生:)

  $('.owl-carousel').owlCarousel({ loop:true, margin:10, dots: true, items: 3, slideBy: 3, nav:true, responsive:{ 0:{ items:1 }, 600:{ items:1 }, 1000:{ items:1 } } }); 

 .item { background: #04fbc7; height: 700px; margin-left: 40px; margin-right: 40px; margin-bottom: 189px; } .owl-dots { text-align: center; } .owl-dot { cursor: pointer; height: 12px; width: 12px; margin: 0 2px; background-color: #ffffff; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; margin-top: 132px; } .active, .owl-dot:hover { background-color: #99f2df; } 

 function carousel_wiever () { ?> <div class="wrapper owl-carousel owl-theme"> <?php $args = array( 'post_type' => 'citat', 'posts_per_page' => -1, 'orderby' => 'date', 'order' => 'DESC' ); query_posts( $args ); // The Loop while ( have_posts() ) : the_post(); ?> <div class="item"> <div class="custom_class"> <div class="text1"> <span class="quote"><?php meta('citatet'); ?></span> </div> <div class="text2"> <span class="author"><?php meta('citerat_av'); ?></span> </div> </div> <!-- custom_class --> <div class="owl-dots"> <div class="owl-dot active"><span></span></div> <div class="owl-dot"><span></span></div> <div class="owl-dot"><span></span></div> </div> </div> <!-- item --> </div> <!-- wrapper --> <?php endwhile; // Reset Query wp_reset_query(); ?> 

Answer 1

首先，您已经放置

<div class="owl-dots">
        <div class="owl-dot active"><span></span></div>
        <div class="owl-dot"><span></span></div>
        <div class="owl-dot"><span></span></div>
</div>  

在您的<div class="item">以及while循环内，并且封闭包装div也位于您的循环中。 因此dom结构将无法正确输出。

function carousel_wiever () {
?>

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

<?php       
        $args = array(
            'post_type' => 'citat',
            'posts_per_page' => -1,
            'orderby' => 'date',
            'order' => 'DESC'
        );
        query_posts( $args );
        // The Loop
        while ( have_posts() ) : the_post(); ?>

        <div class="item">
            <div class="custom_class">

                <div class="text1">
                            <span class="quote"><?php meta('citatet'); ?></span>
                        </div>
                <div class="text2">
                            <span class="author"><?php meta('citerat_av'); ?></span>
                        </div>
                </div> <!-- custom_class -->

            </div> <!-- item  -->     

        <?php endwhile;
        // Reset Query
        wp_reset_query();   
        ?>
        <div class="owl-dots">
            <div class="owl-dot active"><span></span></div>
            <div class="owl-dot"><span></span></div>
            <div class="owl-dot"><span></span></div>
        </div>  
</div> <!-- wrapper -->
<?php
}
?>

其次，我将重新考虑使用query_posts，因为它效率很低。 在此处阅读有关此内容的更多信息： https : //wordpress.stackexchange.com/questions/1753/when-should-you-use-wp-query-vs-query-posts-vs-get-posts