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;
});