CODEWITHSUNDEEP
javascriptjquerybxslider
Vasiliy
Vasiliy

Reputation: 103

Move carousel to the clicked div, bxslider

How it's possible to move the carousel to the clicked div, if I'm using bxslider?

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. enter image description here

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

Upvotes: 1

Views: 1125

Answers (1)

zer00ne
zer00ne

Reputation: 44086

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

I have made 3 bxSliders with some minor changes. When you advance or stepback, the active slide should always be the one furthest to the left. No matter how many slides are visible at one time. This is true for one step carousels. If you use a two or more steps for your carousel, then you'll get inaccuracies between what looks as active and what really is active. See the snippet, the first slider is the original one which by the way behaves the way you wanted it to. The other 2 sliders have 2 steps and using them you can see it's hard to keep track of what's actually active.

Upvotes: 1

Related Questions