Wordpress and Advanced Custom Fields and Flickity

I am trying to add [Flickity Carousel][1] into my Wordpress theme. I was successful yesterday. However, when I returned to my theme this morning the carousel files are not loading. I am not sure what went wrong or if I'm missing something. I am also utilizing advanced custom fields and tachyons Would really love a fresh set of eyes.

Here is where I enqueue the files

function flickity_scripts() {
wp_enqueue_script( 'flickityjs', get_template_directory_uri() . '/js/flickity.pkgd.min.js', array( 'jquery' ), '1.9.0', true );
wp_enqueue_script( 'flickityjs-init', get_template_directory_uri(). '/js/flickity.init.js', array( 'flickityjs' ), '1.9.0', true );

wp_enqueue_style( 'flickitycss', get_template_directory_uri() . '/css/flickity.min.css', 'all');

} add_action( 'wp_enqueue_scripts', 'flickity_scripts' );

this is the flickityjs-init files content

jQuery(document).ready(function($){
$('.main-carousel').flickity({
    // options
    cellAlign: 'left',
    contain: true,
    autoPlay: 6000,
    wrapAround: true,
    selectedAttraction: 0.009,
    friction: 0.3,
    prevNextButtons: false,
  });

});

Here is the html for the carousel

section class="main-carousel relative pt4 pb7 overflow-hidden" style="background-color: ?php the_sub_field ('gallery_background_color');?"
?php $images = get_sub_field('gallery'); if( $images ): ?
    div class="carousel-box" style="background-color: ?php the_sub_field ('gallery_background_color');?"/div
        div class="main-carousel"
        div class="carousel-container"
        ?php foreach( $images as $image ): ?
                div class="ma0 gallery-slide"
                    div class="bg-center cover vh-75 list"style="background-image: url(?php echo $image['url']; ?)" alt="?php echo $image['url']; ?"/div
                /div
            ?php endforeach; ?
        /div
        /div

?php endif;?

Topic advanced-custom-fields wp-enqueue-style wp-enqueue-script images themes Wordpress

Category Web


Such a dummy! Turns out that since I was wp_enqueque for the JS script with the footer. I had commented out get_footer(); in my single.php page and as a result was not loading.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.