javascript - 将轮播移动到单击的 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

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


});

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

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

我制作了 3 个 bxSlider，并进行了一些细微的更改。当您前进或后退时，事件幻灯片应始终是最左边的幻灯片。无论一次可见多少张幻灯片。这对于一步式轮播来说是正确的。如果您的轮播使用两个或更多步骤，那么看起来活跃的内容和真正活跃的内容之间会出现不准确的情况。请参阅代码片段，第一个 slider 是原始 slider ，顺便说一句，它的行为方式符合您想要的方式。其他 2 个 slider 有 2 个步骤，使用它们您会发现很难跟踪实际事件的内容。