Bxslider如何將滑塊移動到特定圖像（項目）

Question

我正在使用Bxslider：Bxslider我正在查看是否有方法來移動滑塊以顯示特定項目（圖像），下面我有其他2個滑塊之一，這裏是我使用的代碼：

$(document).ready(function(){ 
     slider = $('.bxslider').bxSlider({ 
      pager: false, 
      speed: 1500, 
      captions: true, 
      minSlides: 3, 
      maxSlides: 12, 
      slideWidth: 480, 
      slideMargin: 0 
     }); 
    $('.bxslider2').bxSlider({ 
     pager: false, 
     controls: false, 
     minSlides: 3, 
     maxSlides: 12, 
     slideWidth: 115, 
     slideMargin: 0 
    }); 
$(".secondSlider").mouseover(function(){ 
     /* I want to move the first slider to show the image that is hovered on the second slider*/ 
     slider.(move slider one to the hovered image on the second slider) // Here is the line I want to fix. 
    }); 
}); 


<ul class="bxslider"> 
    <li><img src="img/picture1.jpg" /></li> 
    <li><img src="img/picture2.jpg" /></li> 
    <li><img src="img/picture3.jpg" /></li> 
    <li><img src="img/picture4.jpg" /></li> 
    <li><img src="img/picture5.jpg" /></li>   
</ul> 
<ul class="bxslider2"> 
    <li><img class="secondSlider" src="img/picture1.jpg" /></li> 
    <li><img class="secondSlider" src="img/picture2.jpg" /></li> 
    <li><img class="secondSlider" src="img/picture3.jpg" /></li> 
    <li><img class="secondSlider" src="img/picture4.jpg" /></li> 
    <li><img class="secondSlider" src="img/picture5.jpg" /></li>  
</ul> 

我怎麼能這樣做嗎？

Answer 1

也許你正在尋找這一個。

goToSlide（） 進行滑動過渡到提供的幻燈片索引 （從零開始）

例如：

slider = $('.bxslider').bxSlider(); 
slider.goToSlide(3); 

Answer 2

你只需要列舉你的幻燈片，然後使用goToSlide功能。請確保您開始枚舉以0這是工作例如：

HTML

<ul class="gallery"> 
    <li> 
    <a class="slider-move" href="#" data-number="0"> 
     <img src="/uploads/0/1810-008.jpg"> 
    </a> 
    </li> 
    <li> 
    <a class="slider-move" href="#" data-number="1"> 
     <img src="/uploads/0/1812-VDS_3236-600x399.jpg"> 
    </a> 
    </li> 
</ul> 

的Javascript

gallerySlider = $('.gallery').bxSlider(); 

$('.slider-move').click(function(e){ 
    e.preventDefault(); 
    var number = $(this).data('number'); 
    gallerySlider.goToSlide(number); 
    return false; 
});