Flexslider 不与动态项目同步

Question

我使用此代码为每个循环使用 ACF 激活了 flexslider：

$(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"
    });

});


<div class="flexslider" id="galleryslider">
    <ul class="slides">

    <?php
    $gallery = get_field('fullgallery');

        foreach( $gallery as $galleryImage ): 
        $image = $galleryImage['url']; ?>

            <li style="background-image: url('<?php echo $image; ?>')"></li>

        <?php endforeach; ?>

    </ul>
</div>

<div class="flexslider" id="gallerycarousel">
    <ul class="slides">

        <?php
        foreach( $gallery as $galleryImage ):
        $image = $galleryImage['url'];
        ?>

            <li style="background-image: url('<?php echo $image; ?>'); background-size: cover;">

                <div class="viewImg">
                    <a class="fancybox" rel="gallery1" href="<?php echo $image; ?>" title="<?php echo $galleryImage['caption']; ?>"><i class="fa fa-search"></i></a>
                </div>

            </li>

            <meta property="og:image" content="<?php echo $galleryImage['url']; ?>" />
        <?php endforeach; ?>

    </ul>
</div>

我的问题是单击缩略图时，它会将我带到错误的大图像，我尝试重新下载 flexslider 但没有运气，我还尝试用静态项目替换 for each 循环，这似乎修复它。

我不确定如何让它与 foreach 循环一起工作，有人有解决方案吗？

Answer 1

似乎删除了这个：<meta property="og:image" content="<?php echo $galleryImage['url']; ?>" /> 解决了这个问题。