将轮播移动到单击的div，bxslider

Question

如果我使用bxslider，如何将轮播移动到点击的div？

下面是我的旋转木马。单击控件（左/右箭头）时，它只移动一个幻灯片/ div，因此活动div始终位于左侧。我需要的是使这些div可点击，例如当我点击第3个div时，它会激活并将其移动到左侧位置1。

$(document).ready(function() {
  $('.carousel-nav').bxSlider({
    slideWidth: 275,
    minSlides: 2,
    maxSlides: 4,
    moveSlides: 1,
    slideMargin: 0
  });
});

<link href="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.js"></script>



<div class="carousel-nav">
  <div class="nav-item"><a href="#" data-slide-index="0">active div</a>
  </div>
  <div class="nav-item"><a href="#" data-slide-index="1">second div</a>
  </div>
  <div class="nav-item"><a href="#" data-slide-index="2">second div</a>
  </div>
  <div class="nav-item"><a href="#" data-slide-index="3">third div</a>
  </div>
  <div class="nav-item"><a href="#" data-slide-index="4">fouth div</a>
  </div>
</div>

Answer 1

＆＃13;

＆＃13;

$(document).ready(function() {
  var bx = $('.carousel-nav').bxSlider({
    slideWidth: 300,
    minSlides: 2,
    maxSlides: 4,
    moveSlides: 1,
    slideMargin: 25

  });

  var ax = $('.aux-nav').bxSlider({
    slideWidth: 300,
    minSlides: 3,
    maxSlides: 3,
    moveSlides: 2,
    slideMargin: 25

  });

  var sx = $('.sec-nav').bxSlider({
    slideWidth: 300,
    minSlides: 2,
    maxSlides: 2,
    moveSlides: 2,
    slideMargin: 25
  });


});

＆＃13;

body {
  font: small-caps 400 16px/1.45'Source Code Pro';
}

＆＃13;

<link href="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.js"></script>


<p>Min: 2 Max: 4 Move: 1</p>
<div class="carousel-nav">
  <div class="nav-item">
    <a href="#" data-slide-index="0">
      <img src="http://placehold.it/300x100/000/fff.png&text=FIRST" />
    </a>
  </div>
  <div class="nav-item">
    <a href="#" data-slide-index="1">
      <img src="http://placehold.it/300x100/048/Fee.png&text=SECOND" />
    </a>
  </div>
  <div class="nav-item">
    <a href="#" data-slide-index="2">
      <img src="http://placehold.it/300x100/fa8/375.png&text=THIRD" />
    </a>
  </div>
  <div class="nav-item">
    <a href="#" data-slide-index="3">
      <img src="http://placehold.it/300x100/9a7/a10.png&text=FOURTH" />
    </a>
  </div>
  <div class="nav-item">
    <a href="#" data-slide-index="4">
      <img src="http://placehold.it/300x100/fff/000.png&text=LAST" />
    </a>
  </div>
</div>

<p>Min: 3 Max: 3 Move: 2</p>
<div class="aux-nav">
  <div class="nav-item">
    <a href="#" data-slide-index="0">
      <img src="http://placehold.it/300x100/000/fff.png&text=FIRST" />
    </a>
  </div>
  <div class="nav-item">
    <a href="#" data-slide-index="1">
      <img src="http://placehold.it/300x100/048/Fee.png&text=SECOND" />
    </a>
  </div>
  <div class="nav-item">
    <a href="#" data-slide-index="2">
      <img src="http://placehold.it/300x100/fa8/375.png&text=THIRD" />
    </a>
  </div>
  <div class="nav-item">
    <a href="#" data-slide-index="3">
      <img src="http://placehold.it/300x100/9a7/a10.png&text=FOURTH" />
    </a>
  </div>
  <div class="nav-item">
    <a href="#" data-slide-index="4">
      <img src="http://placehold.it/300x100/fff/000.png&text=LAST" />
    </a>
  </div>
</div>

<p>Min: 2 Max: 2 Move: 2</p>
<div class="sec-nav">
  <div class="nav-item">
    <a href="#" data-slide-index="0">
      <img src="http://placehold.it/300x100/000/fff.png&text=FIRST" />
    </a>
  </div>
  <div class="nav-item">
    <a href="#" data-slide-index="1">
      <img src="http://placehold.it/300x100/048/Fee.png&text=SECOND" />
    </a>
  </div>
  <div class="nav-item">
    <a href="#" data-slide-index="2">
      <img src="http://placehold.it/300x100/fa8/375.png&text=THIRD" />
    </a>
  </div>
  <div class="nav-item">
    <a href="#" data-slide-index="3">
      <img src="http://placehold.it/300x100/9a7/a10.png&text=FOURTH" />
    </a>
  </div>
  <div class="nav-item">
    <a href="#" data-slide-index="4">
      <img src="http://placehold.it/300x100/fff/000.png&text=LAST" />
    </a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我制作了3个bxSliders并进行了一些小改动。当您前进或后退时，活动滑块应始终是最左侧的滑块。无论一次可见多少张幻灯片。一步旋转木马就是这样。如果您为旋转木马使用两个或更多步骤，那么您在看起来活跃和活跃的活动之间会得到不准确的信息。看到代码片段，第一个滑块是原始滑块，顺便说一下它的行为方式。其他2个滑块有2个步骤并使用它们，您可以看到很难跟踪实际活动的内容。