BxSlider with Thumbnails - 缩略图不随滑块滑动

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，没试过你要实现的slider。但是，如果您不介意，我建议您尝试 Slick。下面是一个示例代码，它可以用较少的代码块完美地实现您想要的幻灯片效果。

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

更新

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

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

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

`PLUNKER`

<!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>

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

我重构了它，然后将您的口袋妖怪主题和 Bootstrap 添加到我原来的 Fiddle 中。有一些变化，但我会尽量保持简短：

使用像这样的高级缓动选项：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 选项可用的值，它现在是 `easing:'ease-in-out'。我不知道为什么我首先添加它。
缩略图滑块 .bx-pager 现在已固定，原因有两个：
- 缩略图导航（或与此相关的任何导航）的设计应完整呈现。
- 同步呈现一张幻灯片的滑块（即 .bxslider）和呈现 4 张幻灯片的滑块（即 .bx-pager）所涉及的额外协调成为问题。
在表达式中实例化 bxSlider:
- var bx = $('.bxslider').bxSlider();
  - 这使得使用方法更容易：
- bx.goToSlide()
删除了所有 controls，因为 .bx-pager 已经足够了。
缩略图：
- 使用具有透明背景的 PNG。
- 添加了一个简单的功能，可以将 class .on 切换到活动缩略图（即 .imgThumb.on}
- 此 .on class 使用 transform、position、z-index 和 transition CSS 属性来制作动画。
- 如果将宽度调整得更小，您会看到缩略图层彼此重叠。通过使用透明背景并避免裁剪，这是一个很好的效果。因此，裁剪图像的 background-size: cover 更改为 background-size: contain，它按比例将图像拉伸到元素的边缘而不裁剪。

这是演示。祝你好运，先生。

BxSlider with Thumbnails - 缩略图不随滑块滑动

BxSlider with Thumbnails - Thumbnails dont slide along with the slider

javascript

jquery

bxslider

更新

`PLUNKER`

`FIDDLE`