Testimonials Slider

functions.js

$('.testimonial-slider').slick({
        dots: true,
        infinite: true,
        autoplay: true,
        autoplaySpeed: 5000,
        arrows: true,
        appendArrows: $('.testimonial-slider-footer'),
        prevArrow: "<button type='button' class='slick-arrow prev-arrow'><i class='fa fa-angle-left' aria-hidden='true'></i></button>",
        nextArrow: "<button type='button' class='slick-arrow next-arrow'><i class='fa fa-angle-right' aria-hidden='true'></i></button>"
    });

functions.php

  wp_enqueue_style( 'slick-slider', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css', array(), $the_theme->get( 'Version' ) );
  wp_enqueue_style( 'slick-slider-theme', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css', array(), $the_theme->get( 'Version' ) );
  wp_enqueue_script( 'slick-slider', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js', array('jquery'), $the_theme->get( 'Version' ) );

page.php

<?php if ( have_rows('testimonials') ) : ?>

        <h3 style="margin-bottom: 30px;">Testimonials</h3>
        <div class="testimonial-slider">
          <?php while( have_rows('testimonials') ) : the_row(); ?>
            <div class="testimonial-slide">
              <p><?php the_sub_field('text'); ?></p>
              <p style="text-align: right; margin-right: 20px; font-size: 20px;">- <?php the_sub_field('author'); ?></p>
              <script type="application/ld+json">
                    {
                        "@context": "http://schema.org",
                        "@type": "Review",
                        "itemReviewed": "<?php the_title() ?>",
                        "author": "<?php the_sub_field('author'); ?>",
                        "review": {
                        "@type": "Review",
                            "author": "<?php the_sub_field('author'); ?>",
                            "dateModified": "<?php echo get_the_modified_date('Y-m-d'); ?>",
                            "description": "<?php the_sub_field('text'); ?>",
                            "name": "<?php bloginfo('name') ?>",
                            "reviewRating": {
                            "@type": "Rating",
                                "bestRating": "5",
                                "ratingValue": "5",
                                "worstRating": "1"
                            }
                        }
                    }
                </script>
            </div>
          <?php endwhile; ?>
        </div>
        <div class="testimonial-slider-footer"></div>
      <?php endif; ?>

style.css

.testimonials {
    position: relative;
}

.testimonial-slider {
    background-color: #ddd;
    border-radius: 6px 6px 0 0;
    padding: 36px;
}

.testimonial-slider-footer {
    background-color: #ccc;
    border-radius: 0 0 6px 6px;
    padding: 10px 25px;
    margin: 0 auto;
    position: relative;
    top: -30px;
    display: flex;
    justify-content: space-between;
    min-height: 50px;

}

.testimonial-slider-footer > * {
    background-color: transparent;
    border: none;
}

.testimonial-slider-footer > * > i {
    font-size: 30px;
}

styles.scss

.testimonial-slider {
    background-color: #ddd;
    border-radius: 6px 6px 0 0;
    padding: 36px;
}

.testimonial-slider-footer {
    background-color: #ccc;
    border-radius: 0 0 6px 6px;
    padding: 10px 25px;
    margin: 0 auto;
    position: relative;
    top: -30px;
    display: flex;
    justify-content: space-between;
    min-height: 50px;

    .slick-arrow {
        background-color: transparent;
        border: none;
        cursor: pointer;
        
        &::before {
            content: none;
        }

        i {
            color: #333;
            font-size: 30px;
        }
    }
}

.slick-slider div {
    transition: none;
}