Bxslider How to move the slider to a specific image (item)

Question

I'm using the Bxslider : Bxslider and I'm looking to see if there is a way to move my slider to show a specific item (an image), I have 2 sliders one below the other, here is the code I'm using :

$(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>

How can I do that please ?

Answer 1

Maybe your're looking for this one.

goToSlide() Performs a slide transition to the supplied slide index (zero-based)

example:

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