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