jQuery bxSlider 链接缩略图滑块到主图像滑块

问题描述

我正在尝试组合 bxSlider 的两个实例。我将上面显示的主要/较大图像作为褪色幻灯片显示。在此之下，我有一个显示缩略图的水平滑块。我想将两者链接起来，以便主幻灯片自动运行，除非单击其中一个缩略图 - 在这种情况下，顶部/主幻灯片会暂停并跳到相应的幻灯片。

我在两个单独的滑块上都可以正常工作，但已经达到了能够将两者链接起来的技术极限。

这是 HTML/PHP 代码：

<div class="product-gallery">
            <div class="product-gallery-main">
                <?PHP 
                $images = get_field('product_gallery');
                if( $images ): ?>
                    <ul id="gallery" class="no-list">
                        <?PHP foreach( $images as $image_id ): ?>
                            <li>
                                <?PHP echo wp_get_attachment_image( $image_id,'gallery-main' ); ?>
                            </li>
                        <?PHP endforeach; ?>
                    </ul>
                <?PHP endif; ?>
            </div>
            <div class="product-gallery-thumbs">
                <?PHP 
                $thumbs = get_field('product_gallery');
                $count = 0;
                if( $thumbs ): ?>
                    <ul id="gallery-thumbs" class="no-list">
                        <?PHP foreach( $thumbs as $thumb_id ): ?>
                            <li>
                                <a href="#" data-slide-index="<?PHP echo $count; ?>"><?PHP echo wp_get_attachment_image( $thumb_id,'thumbnail' ); ?></a>
                            </li>
                        <?PHP $count++; endforeach; ?>
                    </ul>
                <?PHP endif; ?>
            </div>
        </div>

这里是 bxSlider jQuery：

$('#gallery').bxSlider({
    auto: true,controls: false,pager: false,mode: 'fade'
});

$('#gallery-thumbs').bxSlider({
    auto: false,controls: true,nextText: '',prevText: '',mode: 'horizontal',moveSlides: 1,slideWidth: 90,slideMargin: 30,minSlides: 3,maxSlides: 4,touchEnabled: false,infiniteLoop: false,hideControlOnEnd: true
});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

bxslider jquery