Wordpress 每个光滑滑块有4种自定义立柱类型

我正在尝试创建一个滑块，每个滑块包含4个自定义帖子类型

我已经设法让滑块工作，但目前只显示了一个自定义后，每个幻灯片类型

我需要每张幻灯片有4篇文章，但我似乎不知道如何做到这一点

有人有什么建议吗？非常感谢

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

$（文档）.ready（函数（）{
$（'.courses slider'）。光滑({
点：是的，
无限：错，
速度：1000，
自动播放：对，
自动播放速度：4000，
无限：是的，
centerMode:false，
初始幻灯片：0，
箭头：是的，
});
});
试试这个脚本。您丢失了此选项
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>


jQuery（文档）.ready（函数（）{
jQuery（'.courses slider'）.slick({
点：是的，
无限：错，
速度：1000，
自动播放：对，
自动播放速度：4000，
无限：是的，
centerMode:false，
初始幻灯片：0，
箭头：是的，
幻灯片放映：4，
幻灯片滚动：4
});
});
非常感谢您，您为我节省了很多困惑的时间！很高兴帮助你：）你把这个文件放在哪里了？我希望能够做它作为一个简短的代码，这样我就可以把在一个页面的一部分。可能吗？是的。你可以把footer.php文件放进去。@rudtek，是的。您可以将footer.php文件放入。