ACF Pro with SlickJS

I am trying to create a slider on my wordpress theme using SlickJS and ACF Pro using this tutorial. I am using some custom css styling around the Slick theme but the Jquery and CSS dont seem to be registering correctly as my slider just isnt working.

My functions.php is as follows:

function theme_enqueue() {
    //wp_deregister_script( 'jquery' );
    wp_enqueue_script( 'jquery', get_template_directory_uri(). '/js/jquery.js', array( 'jquery' ) );
    wp_enqueue_script( 'bootstrap', get_template_directory_uri(). '/js/bootstrap.js', array( 'jquery' ) );
    wp_enqueue_style('font-awesome', get_stylesheet_directory_uri() . '/font-awesome/css/font-awesome.css');
    wp_enqueue_script( 'material', get_template_directory_uri(). '/js/material.js', array( 'jquery' ) );
    wp_enqueue_script( 'material-kit', get_template_directory_uri() . '/js/material-kit.js', '1.0.0', true );
}
add_action('wp_footer', 'theme_enqueue');

function slick_slider_script_styles() {
    wp_enqueue_script( 'slickjs', get_stylesheet_directory_uri(). '/js/slick.min.js', array( 'jquery' ), '1.6.0', true );
    wp_enqueue_script( 'slickjs-init', get_stylesheet_directory_uri(). '/js/slick-init.js', array( 'slickjs' ), '1.6.0', true );

    wp_enqueue_style( 'slickcss', get_stylesheet_directory_uri() . '/css/slick.css', '1.6.0', 'all');
    wp_enqueue_style( 'slickcsstheme', get_stylesheet_directory_uri(). '/css/slick-theme.css', '1.6.0', 'all');
}
add_action('wp_enqueue_scripts', 'slick_slider_script_styles');

My slick-init.js file is:

jQuery(document).ready(function($){
     $('.testimonials').slick({
      dots: true,
      slidesToShow: 1,
      swipeToSlide: true,
    });
});

My actual PHP/HTML is:

<section class="mantras">
    <div class="row">
        <h2 class="title">Testimonials</h2>
        <div class="testimonials">
            <div class="vision">
                <?php if( have_rows('testimonials') ): ?>
                    <?php while( have_rows('testimonials') ): the_row(); ?>
                       <?php
                        $image = get_sub_field('image');
                        $company_name = get_sub_field('company_name');
                        $company_testimonial = get_sub_field('company_testimonial');
                        ?>
                        <p><img class="center-img" src="<?php $image ?>"></p>
                        <h4 class="info-title text-center"><?php echo $company_name; ?></h4>
                        <p class="description"><?php echo $company_testimonial; ?></p>
                    <?php endwhile; ?>
                <?php endif; ?>
            </div>
        </div>
    </div>
</section>

This is what the result is as of now:
incorrect

There should be arrows on the side and dots on the bottom (from the css styling and Jquery). What seems to be the issue?

Solutions Collecting From Web of "ACF Pro with SlickJS"