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

Question

I have some problems with the jQuery Owl Carousel.

I'm trying to get the dots to work with my function. I have tried to find the solution in other answers and tried different methods. Tried with trigger and also Slideby but can't solve it.

How can I make the dots work with my function?

Please help a student :)

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

First off, you have placed

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

inside your <div class="item"> and also inside your while loop and the closing wrapper div is also in your loop. So the dom structure will not output correct.

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

Secondly I would reconsider using query_posts, as it is very inefficiënt. Read more about that here: https://wordpress.stackexchange.com/questions/1753/when-should-you-use-wp-query-vs-query-posts-vs-get-posts