每个 Slick Slider 有 4 个自定义帖子类型 [英] 4 Custom Post Types per Slick Slider
本文介绍了每个 Slick Slider 有 4 个自定义帖子类型的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试创建一个滑块,其中每张幻灯片包含 4 个自定义帖子类型.
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.
每张幻灯片我需要 4 个帖子,但我似乎不知道如何实现.
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 ?>
推荐答案
试试这个脚本.你错过了这个选项 slidesToShow: 4,slidesToScroll: 4
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>
这篇关于每个 Slick Slider 有 4 个自定义帖子类型的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文