My Flickity slider shows just image as a block and does not slide... using Wordpress loop.

[nwillox]

My Flickity slider shows all images and does not slide... using Wordpress. Code is as such...
Using ACF 'gallery' and Flickity

PHP
<?php $images = get_field('gallery'); $size = 'full'; // (thumbnail, medium, large, full or custom size) if( $images ): ?>

        <div class="main-carousel">
            <ul>
            <?php foreach( $images as $image ): ?>
                                   <li class="carousel-cell">
                            <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
                             <p><?php echo esc_html($image['caption']); ?></p>
                        </li>
            <?php endforeach; ?>
            </ul>
        </div>

<?php endif; ?>

JS // flickity var elem = document.querySelector('.main-carousel'); var flkty = new Flickity( elem, { cellAlign: 'left', freeScroll: true, wrapAround: true, lazyLoad: 1 });

CSS .carousel-cell { margin: 5px; overflow: hidden; }

/ position dots up a bit / .flickity-page-dots { bottom: -22px; } / dots are lines / .flickity-page-dots .dot { height: 4px; width: 40px; margin: 0; border-radius: 0; }

[nwillox]

Local development so far. Needing images to go through the loop for UI.

[desandro]

I'm sorry to see you're having trouble with Flickity. Could you provide a reduced test case? See Submitting Issues in the contributing guidelines.