Integrating slick.js into wordpress-CodePudding

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 >
        <?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 ><i  aria-hidden="true"></i></div>',
        nextArrow: '<div ><i  aria-hidden="true"></i></div>'
    });

});

Many thanks in advance!

CodePudding user response：

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 >
    <div >
        <div >
            <div >
                <div >
                    <?php
                    if ($the_query->have_posts()) {
                        while ($the_query->have_posts()) {
                            $the_query->the_post(); ?>
                            <div >
                                <div >
                                    <?php $image = get_field('foto', get_the_ID()); ?>
                                    <img src="<?php echo $image['url']; ?>"  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 >
                            <div >
                                <h3>No Testimonials Found</h3>
                            </div>
                        </div>
                    <?php }
                    wp_reset_postdata();
                    ?>
                </div>
            </div>
        </div>
    </div>