使點與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