Integrating slick.js into wordpress

Question

Currently I'm integrating slick.js combined with some ACF fields. In the backend you can actually filter the testimonials on count and certain categories. Everything is working well so far, but when I add the slider class to my html syntax, each testimonial is considered as a different, separate slider. I'd like to have all testimonials combined in 1 slider. Can anyone help me on this one?

My code so far:

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;?>

and 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>'
    });

});

Many thanks in advance!

Answer 1

Adjusted some of your code. This should work:

<?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>