Reply To: Flexslider not syncing with dynamic items

• James

• April 24, 2016 at 4:54 pm

Hi @gab1982

It’s because the HTML code you used is the code that is generated by Flexslider. You need to use the right structure to make it works. Please take a look at these pages to learn more about it: https://www.woothemes.com/flexslider/, https://www.advancedcustomfields.com/resources/gallery/. Looking at those pages, I believe your code should be like this:

<script>
jQuery(function($) {
    $(window).load(function() {
      // The slider being synced must be initialized first
        $('#gallerycarousel').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            directionNav: true,
            itemWidth: 300,
            itemMargin: 10,
            animationLoop: true,
            asNavFor: '#galleryslider'
        });

        $('#galleryslider').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            directionNav: true,
            sync: "#gallerycarousel"
        });
      
        $('.flexslider').flexslider();
      

    });
});
</script>

<?php
$images = get_field('fullgallery');
if( $images ): 
?>

    <div id="galleryslider" class="flexslider">
        <ul class="slides">
            <?php foreach( $images as $image ): ?>
                <li>
                    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
                    <p><?php echo $image['caption']; ?></p>
                </li>
            <?php endforeach; ?>
        </ul>
    </div>
    <div id="gallerycarousel" class="flexslider">
        <ul class="slides">
            <?php foreach( $images as $image ): ?>
                <li>
                    <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
                </li>
            <?php endforeach; ?>
        </ul>
    </div>
<?php endif; ?>

I hope this helps.