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但没有运气，我也尝试用静态项替换每个循环，似乎解决它。

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

Answer 1

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

Flexslider不与动态项同步

1 个答案: