我试图创建一个包含每张幻灯片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 ?>
试试这个脚本。你错过了这个选项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>