Modify this loop to fit my jQuery slider (slides)

by

I´m trying to make a slider which takes thumbnails from a certain custom post type and displays for of them for each “slide”. I get the slider and thumbnails to work like they should, but I´m unsure of how I should modify the loop to get it to display 4 posts in a container, then repeat with the next 4 posts and so on.

My loop looks like this:

<div id="slides">
    <div class="slides_container">

        <?php $loop = new WP_Query(array('post_type' => 'fastighet', 'posts_per_page' => -1, 'orderby'=> 'ASC')); ?>
        <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

            <div class="slide">
                <?php $url = get_post_meta($post->ID, "url", true);
                if($url!='') {
                    echo '<a href="'.$url.'">';
                    echo the_post_thumbnail('admin-list-thumb');
                    echo '</a>';
                } else {
                    echo the_post_thumbnail('admin-list-thumb');
                } ?>
                <div class="caption">
                    <h5><?php the_title(); ?></h5>
                </div>
            </div>

        <?php endwhile; ?>
        <?php wp_reset_query(); ?>

    </div> <!-- end .slides_container -->

    <a href="#" class="prev">prev</a>
    <a href="#" class="next">next</a>

</div> <!-- end .slides -->

Every div with the class of slide becomes a slide as you can see. But how can I make it put 4 posts into each such slide, then 4 post more into another slide etc.

Any help or tips would be really appreciated!

2 Answers
2

Tried very simple math. <div class="slide"> will print after every 4 post. So, if statement with old school logic $i%4 == 0

<div class="slides_container">

                        <?php 
                            $args = array(
                                                        'post_type' => 'fastighet',
                                                        'numberposts' => -1,
                                                        'orderby' => 'ASC'
                                                    );
                            $posts = get_posts($args);
                            ?>
                        <?php $i = 0; foreach($posts as $post): ?>
                            <?php if($i%4 == 0): ?>
                                <div class="slide">
                            <?php endif; 
                                        $url = get_post_meta($post->ID, "url", true);
                                        if($url) {
                                                echo '<a href="'.$url.'">';
                                                echo the_post_thumbnail('admin-list-thumb');
                                                echo '</a>';
                                        } else {
                                                echo the_post_thumbnail('admin-list-thumb');
                                        } ?>
                                        <div class="caption">
                                                <h5><?php the_title(); ?></h5>
                                        </div>
                              <?php if($i%4 == 3): ?></div> <!--end .slide--><?php endif; ?> 

                        <?php $i++; endforeach; ?>

                </div> <!-- end .slides_container -->

Let me know how it goes. Thanks!

Leave a Comment