将 slick.js 集成到 wordpress

Question

目前我正在整合 slick.js 与一些 ACF 字段。在后端，您实际上可以根据计数和某些类别过滤推荐。到目前为止一切都运行良好，但是当我将滑块 class 添加到我的 html 语法时，每个推荐都被视为一个不同的、单独的滑块。我想将所有推荐书合并到 1 个滑块中。谁能帮我解决这个问题？

到目前为止我的代码：

block.php

<?php
/**
 * Block Name: Testimonials
 *
 * This is the template that displays the testimonials loop block.
 */

$argType = get_field( 'loop_argument_type' );
if( $argType == "count" ) :
  $args = array( 
    'orderby' => 'title',
    'post_type' => 'testimonials',
    'posts_per_page' => get_field( 'testimonial_count' )
  );
else:
  $testimonials = get_field( 'select_testimonials' );
  $args = array( 
    'orderby' => 'title',
    'post_type' => 'testimonials',
    'post__in' => $testimonials
  );
endif;

$the_query = new WP_Query( $args );

  if ( $the_query->have_posts() ) :
    while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

      <div class="testimonialHolder">
        <?php the_content(); ?>
        <h3><?php the_title(); ?></h3>
        <b><?php the_field('naam', get_the_ID()); ?></b> 
        <?php the_field('samenvatting', get_the_ID()); ?>
      </div>
    
    <?php endwhile; ?>
<?php endif;?>

和slider.js

jQuery(document).ready(function($) {

    //Slick Slider
    $('.testimonialHolder').slick({
        autoplay:true,
        prevArrow: '<div class="slick-prev"><i class="fa fa-angle-left" aria-hidden="true"></i></div>',
        nextArrow: '<div class="slick-next"><i class="fa fa-angle-right" aria-hidden="true"></i></div>'
    });

});

非常感谢！

Answer 1

调整了部分代码。这应该有效：

<?php

/**
 * Block Name: Testimonials
 *
 * This is the template that displays the testimonials loop block.
 */

$argType = get_field('loop_argument_type');
if ($argType == "count") :
    $args = array(
        'orderby' => 'title',
        'post_type' => 'testimonials',
        'posts_per_page' => get_field('testimonial_count')
    );
else :
    $testimonials = get_field('select_testimonials');
    $args = array(
        'orderby' => 'title',
        'post_type' => 'testimonials',
        'post__in' => $testimonials
    );
endif;


$the_query = new WP_Query($args);

?>

<section class="testimonials">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="testimonialHolder">
                    <?php
                    if ($the_query->have_posts()) {
                        while ($the_query->have_posts()) {
                            $the_query->the_post(); ?>
                            <div class="item">
                                <div class="testimonial">
                                    <?php $image = get_field('foto', get_the_ID()); ?>
                                    <img src="<?php echo $image['url']; ?>" class="img-circle" alt="<?php echo $image['alt']; ?>" />
                                    <h4><?php the_field('naam', get_the_ID()); ?></h4>
                                    <p><?php the_field('samenvatting', get_the_ID()); ?></p>
                                </div>
                            </div>
                        <?php } 
                    } else { ?>
                        <div class="item">
                            <div class="testimonial">
                                <h3>No Testimonials Found</h3>
                            </div>
                        </div>
                    <?php }
                    wp_reset_postdata();
                    ?>
                </div>
            </div>
        </div>
    </div>

将 slick.js 集成到 wordpress

Integrating slick.js into wordpress

html

php

wordpress

slick.js

wordpress-gutenberg