如何解决jQuery bxSlider 链接缩略图滑块到主图像滑块
我正在尝试组合 bxSlider 的两个实例。我将上面显示的主要/较大图像作为褪色幻灯片显示。在此之下,我有一个显示缩略图的水平滑块。我想将两者链接起来,以便主幻灯片自动运行,除非单击其中一个缩略图 - 在这种情况下,顶部/主幻灯片会暂停并跳到相应的幻灯片。
我在两个单独的滑块上都可以正常工作,但已经达到了能够将两者链接起来的技术极限。
<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 举报,一经查实,本站将立刻删除。