title: Move carousel to the clicked div, bxslider
body: <p>How it's possible to move the carousel to the clicked div, if I'm using bxslider? </p>
  
  <p>Below is my carousel. When you click on controls (left/right arrows) it moves only one slide/div, so the active div is always first on the left hand side. What I need is to make these div's clickable so e.g. when I click on 3rd div it makes it active and moves it to the left position 1.
  <a href="https://i.stack.imgur.com/TXZVu.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TXZVu.jpg" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $('.carousel-nav').bxSlider({
      slideWidth: 275,
      minSlides: 2,
      maxSlides: 4,
      moveSlides: 1,
      slideMargin: 0
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css" rel="stylesheet" /&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.js"&gt;&lt;/script&gt;
  
  
  
  &lt;div class="carousel-nav"&gt;
    &lt;div class="nav-item"&gt;&lt;a href="#" data-slide-index="0"&gt;active div&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="nav-item"&gt;&lt;a href="#" data-slide-index="1"&gt;second div&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="nav-item"&gt;&lt;a href="#" data-slide-index="2"&gt;second div&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="nav-item"&gt;&lt;a href="#" data-slide-index="3"&gt;third div&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="nav-item"&gt;&lt;a href="#" data-slide-index="4"&gt;fouth div&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>