通过缩略图从外部触发图库滑块

Question

我有图库滑块与缩略图一起使用。

而且我需要通过链接从滑块外部打开滑块的图像。 所以我尝试了这段代码。

但是，当我单击侧面链接时，它总是只打开第一个幻灯片图像。

$(window).click(function(){
  var target="#1";  
  $('a[href='+target+']').click()
})

当我单击第一个拇指时，它会触发＃1，但是当我单击第二个，第3个第四时...时，它会再次触发相同的＃1。 但是我需要在单击第二个拇指时，它必须打开＃2...。

我将此代码用于外部缩略图。 这段代码有什么问题。

    <div class="main">
                    <a href="#1"><img src="images/thumbs/c1.jpg" data-largesrc="images/large/c1.jpg" alt="image01"/></a>
                    <a href="#2"><img src="images/thumbs/c2.jpg" data-largesrc="images/large/c2.jpg" alt="image02"/></a>
                    <a href="#3"><img src="images/thumbs/c3.jpg" data-largesrc="images/large/c3.jpg" alt="image03"/></a>
</div>

该滑块工作正常。 但是我需要从滑块外侧单击此缩略图，以触发滑块的每个图像。

<ul class="thumb">
   <li><img src="images/thumbs/c1.jpg"  /></li>
   <li><img src="images/thumbs/c2.jpg"  /></li>
   <li><img src="images/thumbs/c3.jpg"  /></li>
</ul>

当我单击.thumb时，目标必须是主要的。

Answer 1

要手动触发任何事件，您需要使用trigger（）方法。 请尝试以下。

$('body').on("click",".thumb li", function(){
    var target= $(this).attr("data-ref");  // target will give you #1 or #2 or #3
    $('.main a[href='+target+']').trigger('click');

});

<ul class="thumb">
   <li data-ref="#1"><img src="images/thumbs/c1.jpg"  /></li>
   <li data-ref="#2"><img src="images/thumbs/c2.jpg"  /></li>
   <li data-ref="#3"><img src="images/thumbs/c3.jpg"  /></li>
</ul>

小提琴