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