`FIDDLE`

Question

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

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

2）并且还使主滑块可拖动。用鼠标更改幻灯片。

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

我为你做了一个JSFIDDLE

这是我的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]');
});

非常感谢。

============================================

我进行了一些搜索，并更新了我的JSFIDDLE

我改变了我的js代码部分：

但有时会冻结：/

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

Answer 1

之前我使用过BxSlider，并没有尝试过你想要实现的滑块。但是，如果您不介意，我建议您尝试光滑。下面是一个示例代码，可以完美地实现您对具有较少代码块的幻灯片所需的内容。

$('.product-slider').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.custom-pager'
});
$('.custom-pager').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.product-slider',
  dots: false,
  centerMode: true,
  focusOnSelect: true
});

.custom-pager .img-container {
  width: 167px;
  height: 165px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
}

.product-slider .img-container {
  height: 525px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
}

.slide a{
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
<script src="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<ul class="bxslider product-slider">

                  <!-- li.item -->
                  <li class="slide">
                    <div class="img-container" style="background-color: #f3f3f3; background-image: url('http://vignette4.wikia.nocookie.net/devilmaou/images/9/92/Giratina.png/revision/latest?cb=20140413190250')">
                    </div>
                  </li>
                  <!-- li : end -->

                  <!-- li.item -->
                  <li class="slide">
                    <div class="img-container" style="background-color: #f8f8f8; background-image: url('http://2.bp.blogspot.com/--gORRn5tL04/UDhREh-LLAI/AAAAAAAASA8/RN4gNJDMUm4/s1600/245Suicune+pokemon+gold+and+silver+artwork.png')">
                    </div>
                  </li>
                  <!-- li : end -->

                  <!-- li.item -->
                  <li class="slide">
                    <div class="img-container" style="background-color: #f3f3f3; background-image: url('http://vignette3.wikia.nocookie.net/pokemon/images/5/5c/486Regigigas_Pokemon_Ranger_Guardian_Signs.png/revision/latest?cb=20150114033117')">
                    </div>
                  </li>
                  <!-- li :end -->

                  <!-- li.item -->
                  <li class="slide">
                    <div class="img-container" style="background-color: #f3f3f3; background-image: url('http://www.legendarypokemon.net/images/xy/megavenusaur.jpg')">
                    </div>
                  </li>
                  <!-- li :end -->
</ul>
 <ul id="bx-pager" class="custom-pager">

                  <!-- li.item -->
                  <li class="slide">
                    <a class="block" data-slide-index="0">
                      <div class="img-container" style="background-color: #f3f3f3; background-image: url('http://vignette4.wikia.nocookie.net/devilmaou/images/9/92/Giratina.png/revision/latest?cb=20140413190250')">
                      </div>
                    </a>
                  </li>
                  <!-- li : end -->

                  <!-- li.item -->
                  <li class="slide">
                    <a class="block" data-slide-index="1">
                      <div class="img-container" style="background-color: #f8f8f8;  background-image: url('http://2.bp.blogspot.com/--gORRn5tL04/UDhREh-LLAI/AAAAAAAASA8/RN4gNJDMUm4/s1600/245Suicune+pokemon+gold+and+silver+artwork.png')">
                      </div>
                    </a>
                  </li>
                  <!-- li : end -->

                  <!-- li.item -->
                  <li class="slide">
                    <a class="block" data-slide-index="2">
                      <div class="img-container" style="background-color: #f3f3f3; background-image: url('http://vignette3.wikia.nocookie.net/pokemon/images/5/5c/486Regigigas_Pokemon_Ranger_Guardian_Signs.png/revision/latest?cb=20150114033117')">
                      </div>
                    </a>
                  </li>
                  <!-- li : end -->


                  <!-- li.item -->
                  <li class="slide">
                    <a class="block" data-slide-index="3">
                      <div class="img-container" style="background-color: #f3f3f3; background-image: url('http://www.legendarypokemon.net/images/xy/megavenusaur.jpg')">
                      </div> 
                    </a>
                  </li>
                  <!-- li : end -->

                </ul>

Answer 2

更新

由于原始代码更接近你想要的，但是IMO不如新版本好，我想我会在这里添加它：

箭头上的每次单击都会使两个滑块向同一方向前进。
- 在一个方向上每6次点击将使顶部滑块返回到与第二个滑块的中间滑块相同的幻灯片。
- 单击第二个滑块的其中一个滑块将使第一个滑块跳转到相应的幻灯片。

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

`PLUNKER`

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>SO35203571-38778710</title>
  <link rel="stylesheet" href="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css" />
  <style>
    #bx-pager {
      left: 25px;
    }
    .bx-wrapper a.active {
      border: 2px solid red;
    }
    .bx-controls-direction a {
      top: -100% !important;
    }
  }
  </style>
</head>

<body>
  <ul class="bxslider">
    <li>
      <img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
    </li>
    <li>
      <img src="http://bxslider.com/images/730_200/me_trees.jpg" />
    </li>
    <li>
      <img src="http://bxslider.com/images/730_200/houses.jpg" />
    </li>
    <li>
      <img src="http://bxslider.com/images/730_200/tree_root.jpg" />
    </li>
    <li>
      <img src="http://bxslider.com/images/730_200/hill_fence.jpg" />
    </li>
    <li>
      <img src="http://bxslider.com/images/730_200/trees.jpg" />
    </li>
  </ul>
  <div id="bx-pager">
    <a data-slide-index="0" href="">
      <img src="http://bxslider.com/images/730_200/hill_trees.jpg" width="100" />
    </a>
    <a data-slide-index="1" href="">
      <img src="http://bxslider.com/images/730_200/me_trees.jpg" width="100" />
    </a>
    <a data-slide-index="2" href="">
      <img src="http://bxslider.com/images/730_200/houses.jpg" width="100" />
    </a>
    <a data-slide-index="3" href="">
      <img src="http://bxslider.com/images/730_200/tree_root.jpg" width="100" />
    </a>
    <a data-slide-index="4" href="">
      <img src="http://bxslider.com/images/730_200/hill_fence.jpg" width="100" />
    </a>
    <a data-slide-index="5" href="">
      <img src="http://bxslider.com/images/730_200/trees.jpg" width="100" />
    </a>
  </div>
  <script src="http://cdn.jsdelivr.net/jquery/2.2.0/jquery.min.js"></script>
  <script src="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
  <script>
    $(function() {

      var bx = $('.bxslider').bxSlider({
        pagerCustom: '#bx-pager',
        controls: false
      });

      var cx = $('#bx-pager').bxSlider({
        mode: 'horizontal',
        maxSlides: 3,
        minSlides: 3,
        moveSlides: 1,
        slideWidth: 275,
        slideMargin: 40,
        pager: false,
        onSlideBefore: bxMove
      });

      function bxMove($ele, from, to) {
        var idx = parseInt(to, 10) - 1;
        bx.goToSlide(idx);
      }

    });
  </script>
</body>

</html>

＆＃13;

当我写that时，我的目的是同步两个滑块，但我当时不知道的是，当使用轮播并在min/maxSlides选项上使用可变范围时真的很乱。 bxSlider将克隆幻灯片以覆盖任何不一致，例如在调整大小时infiniteLoop上有奇数个幻灯片。这是大量的计算和记忆，因此bxSlider冻结，或最终只有在边缘中途清除的幻灯片是常见现象。

我重构了它然后将你的口袋妖怪主题和Bootstrap添加到我原来的小提琴。有许多变化，但我会尽量保持简短：

使用高级宽松选项，例如：easing:'ease-in-out'需要：
- useCSS: true（默认）
- jQuery Easing脚本已加载。因此，应在jquery.bxslider.min.js <script>标记之后添加： <script src="https://cdn.jsdelivr.net/jquery.easing/1.3/jquery.easing.1.3.min.js"></script>
- 顺便说一句，'easeInOutQuint'不是easing选项可用的值，它现在正在缓和：＆＃39;轻松进出＆＃39;。我不知道为什么我首先添加它。
缩略图滑块.bx-pager现在已被固定，原因有两个：
- 缩略图导航（或任何导航）的设计应以其全部容量呈现。
- 同步呈现一张幻灯片（即.bxslider）的滑块和呈现4张幻灯片（即.bx-pager）的滑块所涉及的额外协调会产生问题。
在表达式中实例化bxSlider：
- var bx = $('.bxslider').bxSlider();
  - 这使得使用方法更容易：
- bx.goToSlide()
删除所有controls，因为.bx-pager绰绰有余。
缩略图缩略图：
- 使用透明背景的PNG。
- 添加了一个简单的功能，可将班级.on切换为有效缩略图（即.imgThumb.on}
- 此.on课程使用transform，position，z-index和transition CSS属性进行动画处理。
- 如果您将宽度调整为较小，则会看到缩略图图层彼此重叠。通过使用透明背景和避免裁剪，这可以产生很好的效果。因此，裁剪图像的background-size: cover会更改为background-size: contain，这会将图像按比例拉伸到元素的边缘而不会裁剪。

带缩略图的BxSlider - 缩略图不会与滑块

2 个答案:

更新

`PLUNKER`

`FIDDLE`