我正在尝试创建一个滑块,其中每个幻灯片包含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 ?>
答案 0 :(得分: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>