4 Custom Post Types per Slick Slider

Question

I'm trying to create a slider which contains 4 custom post types per slide.

I've managed to get the slider working, but is currently only showing one custom post type per slide.

I need to have 4 posts per slide, and I can't seem to figure out how to get that to happen.

Does anyone have any advice please? Much appreciated!

<script type="text/javascript">
$(document).ready(function(){
$('.courses-slider').slick({
    dots: true,
    infinite: false,
    speed: 1000,
    autoplay: true,
    autoplaySpeed: 4000,
    infinite: true,
    centerMode: false, 
    initialSlide: 0,
    arrows: true,
});
});
</script>

<?php
$args = array (
'post_type' => 'courses',
'posts_per_page'    => 4,
'meta_key'  => 'homepage_order',
'orderby'   => 'meta_value',
'order' => 'ASC',
'category_name' => 'featured-courses'
 );

$query_slider = new WP_Query( $args );
?>

<?php if ( get_sub_field( 'courses' ) ): ?>
<div class="container">
    <?php if ( $query_slider->have_posts() ) { ?>
        <div class="courses-slider">
            <?php while ( $query_slider->have_posts() ) { $query_slider->the_post(); ?>
                <div class="slider-area">
                    <div class="col-lg-3 col-md-4">
                        <?php the_post_thumbnail( 'courses-slider', array('class' => 'img-fluid')); ?>
                        <?php
                        $field = get_field_object('campuses_selection');
                        $value = $field['value'];
                        $label = $field['choices'][ $value ];
                        ?>
                        <div class="campus <?php echo $value; ?>">
                            <?php echo $label; ?>
                        </div><!--End Campus-->
                        <div class="course-info">
                            <h3><?php the_title(); ?></h3>
                            <p><?php the_field('text'); ?></p>
                            <div class="call-to-action">
                                <?php get_template_part('templates/modules/module', 'calltoaction'); ?>
                            </div><!--End Call to Action-->
                        </div><!--End Course Info-->
                    </div><!--End Columns-->
                </div>
            <?php } ?>
        </div>
    <?php } else { } wp_reset_postdata(); ?>
</div>

<?php else: // field_name returned false ?>
<!--Empty-->
<?php endif; // end of if field_name logic ?>

Answer 1

Try this script. You missied this options slidesToShow: 4,slidesToScroll: 4

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('.courses-slider').slick({
        dots: true,
        infinite: false,
        speed: 1000,
        autoplay: true,
        autoplaySpeed: 4000,
        infinite: true,
        centerMode: false, 
        initialSlide: 0,
        arrows: true,
        slidesToShow: 4,
        slidesToScroll: 4
    });
});
</script>