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. (I understand this issue may be more related to external factors other than ACF, but was really hoping someone could help me. Been stuck on it for days)
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>
the current state of how it looks is: http://i.stack.imgur.com/uA5Ks.png
(notice there are no side arrows and dots at the bottom)
Whats going on here?
