Javascript 带缩略图的BxSlider-缩略图不会随滑块滑动

我正在尝试修复一个缩略图BxSlider以使其正常工作。我正在努力解决这些问题：

1） 单击缩略图图像时，缩略图滑块必须与主滑块一起滑动

2） 同时也使主滑块可拖动。以使用鼠标更改幻灯片

3） 缩略图箭头不会移动幻灯片

我已经给你做了一个报告

这是我的js代码：

$(function() {

  var initThumbnailsSlider = function(object) {

    var $bxSlider = $(object);

    if ($bxSlider.length < 1) {
      return;
    }

    $bxSlider.bxSlider({
      controls: false,
      pagerCustom: '#bx-pager',
      easing: 'easeInOutQuint',
      infiniteLoop: true,
      speed: 500
    });

    $('.bx-custom-pager').bxSlider({
      mode: 'horizontal',
      maxSlides: 4,
      minSlides: 2,
      slideWidth: 156,
      slideMargin: 25,
      easing: 'easeInOutQuint',
      controls: true,
      nextText: "<i class='icm icm-Arrow_right'></i>",
      prevText: "<i class='icm icm-Arrow_left'></i>",
      pager: false,
      moveSlides: 1,
      infiniteLoop: false,
      speed: 500,
      onSlideBefore: bxMove

    });

    function bxMove($ele, from, to) {
      var idx = parseInt(to, 10) - 1;
      bx.goToSlide(idx);
    }

  };


  // execute the function
  initThumbnailsSlider('[data-bx-slider]');
});

---

我以前使用过BxSlider，还没有尝试过您想要实现的滑块。不过，如果你不介意的话，我建议你试试滑头。下面是一个示例代码，它可以用较少的代码块完美地实现幻灯片所需的功能

$（'.product slider'）。光滑({
幻灯片放映：1，
幻灯片滚动：1，
箭头：错，
是的，
asNavFor:“.自定义寻呼机”
});
$（'.custom pager'）.slick({
幻灯片放映：3，
幻灯片滚动：1，
asNavFor:“.product slider”，
点：错，
centerMode：对，
焦点选择：正确
});
.custom pager.img容器{
宽度：167px；
身高：165px；
背景重复：无重复；
背景位置：中心；
背景尺寸：封面；
溢出：隐藏；
}
.产品滑块.img容器{
高度：525px；
背景重复：无重复；
背景位置：中心；
背景尺寸：封面；
溢出：隐藏；
}
.幻灯片a{
光标：指针；
}




















我以前使用过BxSlider，还没有尝试过您想要实现的滑块。不过，如果你不介意的话，我建议你试试滑头。下面是一个示例代码，它可以用较少的代码块完美地实现幻灯片所需的功能


$（'.product slider'）。光滑({
幻灯片放映：1，
幻灯片滚动：1，
箭头：错，
是的，
asNavFor:“.自定义寻呼机”
});
$（'.custom pager'）.slick({
幻灯片放映：3，
幻灯片滚动：1，
asNavFor:“.product slider”，
点：错，
centerMode：对，
焦点选择：正确
});
.custom pager.img容器{
宽度：167px；
身高：165px；
背景重复：无重复；
背景位置：中心；
背景尺寸：封面；
溢出：隐藏；
}
.产品滑块.img容器{
高度：525px；
背景重复：无重复；
背景位置：中心；
背景尺寸：封面；
溢出：隐藏；
}
.幻灯片a{
光标：指针；
}




















更新
由于原始代码更接近您想要的，但我没有更新版本好，我想我将在这里添加它：


每次单击箭头都会使两个滑块朝同一方向前进。

在一个方向上每单击6次，顶部滑块将返回到与第二个滑块的中间滑块相同的滑块
单击第二个滑块的其中一个滑块将使第一个滑块跳到相应的滑块


由于某些原因，堆栈代码段存在DNS问题，请查看



SO35203571-38778710
#bx寻呼机{
左：25px；
}
.bx包装器a.active{
边框：2倍纯红；
}
.
  $bxPager.bxSlider({
      mode: 'horizontal',
      maxSlides: 4,
      minSlides: 2,
      slideWidth: 156,
      slideMargin: 25,
      easing: 'easeInOutQuint',
      controls: true,
      pager: false,
      moveSlides: 1,
      speed: 500,
      onSlideBefore: bxMove

    });


    function bxMove($ele, from, to) {
      var idx = parseInt(to, 10) - 1;
      $bxSlider.goToSlide(idx);
    }