images - 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;?>

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;?>

• images
• themes
• advanced-custom-fields
• wp-enqueue-script
• wp-enqueue-style

Share Improve this question edited Feb 21, 2019 at 20:26 Catalina Gonzalez asked Feb 21, 2019 at 18:56 Catalina GonzalezCatalina Gonzalez 122 bronze badges 2

• what errors are you seeing in the console? – mrben522 Commented Feb 21, 2019 at 20:00
• Hi mrben522, Thanks for your help. I'm not seeing any errors in the console. However, I did add alert('working') to check when the files were being loaded and I found that they were loaded on the index.php/ homepage (dekuki.local) but aren't being loaded for any of the extensions ie. (example. dekuki/local/collection) – Catalina Gonzalez Commented Feb 21, 2019 at 20:28

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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.