0

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

  • what errors are you seeing in the console? – mrben522 Feb 21 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 Feb 21 at 20:28
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.