问题描述
因此,我尝试使用 Slick 滑块显示推荐,但它不起作用。我想我将 css 和 js 文件链接错了或者是因为推荐书正在显示但滑块不起作用。因此,请帮助排除故障。
这是代码:
HTML
<section class="reviews">
<div class="row d-flex flex-column">
<div class="testimonial-holder">
<?PHP
$args = array(
'post_type' => 'testimonials',// 'post_status' => 'publish',// 'posts_per_page' => 1,// 'order' => 'ASC',);
$query = new WP_Query( $args );
?>
<?PHP
while( $query->have_posts() ) :
$query->the_post();
?>
<div class="lead-text d-flex text-center justify-content-center flex-column">
<?PHP echo '<p class="lead">' . get_the_content() . '</p>' . '<small>' . '-' . get_the_title() . '</small>'; ?>
</div>
<?PHP endwhile;
wp_reset_postdata(); ?>
</div>
</div>
</section>
入队
function load_css() {
wp_register_style( 'slick',get_template_directory_uri() . '/src/js/slick/slick.css',array(),false,'all' );
wp_enqueue_style('slick');
} add_action('wp_enqueue_scripts','load_css');
函数 load_js() {
wp_register_script( 'slick',get_template_directory_uri() . '/src/js/slick/slick.min.js',true);
wp_enqueue_script('slick');
} add_action('wp_enqueue_scripts','load_js');
CALLING IT WITH JQUERY//这只是一行代码,它应该可以工作
$('.testimonial-holder').slick();
解决方法
您是否在 document.ready 状态附加了 .slick() 回调?
,最后,我使用带有数字字段的高级自定义字段实现了这一点。我放弃了滑块并稍微改变了概念。因此,根据字段中输入的数字,它会在前端生成星星数。
<?php
$args = array(
'post_type' => 'testimonials','post_status' => 'publish','posts_per_page' => 1,'order' => 'DESC','orderby'=> 'rand',);
$query = new WP_Query( $args );
//if( $query->have_posts() ) :
?>
<!-- Displaying testimonials -->
<?php
while( $query->have_posts() ) : ?>
<!-- <div class="col-lg-4"> -->
<div class="content-holder">
<?php $query->the_post(); ?>
<div class="stars-holder">
<?php
$star = get_field('stars');
$count = 0;
$element = '<i class="fa fa-star"></i>';
while ($count < $star) : $count++;
echo $element;
endwhile;
?>
</div>
<div class="lead-text d-flex text-center justify-content-center flex-column">
<?php echo '<p class="lead">' . get_the_content() . '</p>' . '<small>' . '-' . get_the_title() . '</small>'; ?>
</div>
</div>
<!-- </div> -->
<?php endwhile;
wp_reset_postdata(); ?>