Wordpress div output designed to work with Cycle2.js - wraps a div around every 3 items (accounts for number of items being not divisible by 3 by using the modulo operator). This div can then be used within Cycle2 instead of the individual items

cycle2output.html

<!-- Cycle output beginning using the div .job-wrapper as the wrapper for every 3 items -->

<div class="grid full job-slider cycle-slideshow-jobs" data-cycle-slides=".job-wrapper" data-cycle-pager=".cycle-pager-jobs" data-cycle-timeout=5000 data-cycle-fx=scrollHorz>

post-output.php

                    $counter = 0;
                    $the_query = new WP_Query(
                        array(
                            'post_type' => 'job',
                            'post_status' => 'publish',
                            'posts_per_page' => -1
                        )
                    );

                    if ( $the_query->have_posts() ) {
                        echo '<div class="job-wrapper">';
                        while ( $the_query->have_posts() ) {
                            $the_query->the_post();
                            if ($counter && $counter % 3 === 0){
                                echo '</div><div class="job-wrapper">';
                            }

                            echo '<div class="grid one-third">';
                                echo '<h3><a href="'.get_the_permalink().'">'.get_the_title().'</a></h3>';
                                $salary_type = get_field('salary_type');
                            echo '</div>';
                            $counter++;
                        }
                        echo '</div>';
                    }else{
                        echo '<p>No jobs to display</p>';
                    }
                    wp_reset_postdata();
                    ?>