将 carousel 移动到点击的 div，bxslider答案

【问题标题】：Move carousel to the clicked div, bxslider将 carousel 移动到点击的 div，bxslider
【发布时间】：2015-09-04 22:09:05
【问题描述】：

如果我使用 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>

【问题讨论】：

标签： javascript jquery bxslider

【解决方案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 并做了一些小的改动。当您前进或后退时，活动幻灯片应始终是最左边的一张。无论一次可以看到多少张幻灯片。这适用于一步式轮播。如果您对轮播使用两个或更多步骤，那么您会在看起来活跃的内容和真正活跃的内容之间出现不准确的情况。请参阅 sn-p，第一个滑块是原始滑块，顺便说一下，它的行为方式与您想要的方式相同。其他 2 个滑块有 2 个步骤，使用它们您可以看到很难跟踪实际处于活动状态的内容。

【讨论】：