BX-Slider active class not working when using with pagerCustom which is also slider

问题

BX-Slider active class not working when using with pagerCustom. Pager is also slider with active class which is with red border. Any idea how to fix it?

Html:

<ul class="bxslider">
  <li><img src="http://bxslider.com/images/730_200/hill_trees.jpg" /></li>
  <li><img src="http://bxslider.com/images/730_200/me_trees.jpg" /></li>
  <li><img src="http://bxslider.com/images/730_200/houses.jpg" /></li>
  <li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
  <li><img src="http://bxslider.com/images/730_200/hill_fence.jpg" /></li>
  <li><img src="http://bxslider.com/images/730_200/trees.jpg" /></li>
</ul>
<div id="bx-pager">
  <a data-slide-index="0" href=""><img src="http://bxslider.com/images/730_200/hill_trees.jpg" width="100" /></a>
  <a data-slide-index="1" href=""><img src="http://bxslider.com/images/730_200/me_trees.jpg" width="100" /></a>
  <a data-slide-index="2" href=""><img src="http://bxslider.com/images/730_200/houses.jpg" width="100" /></a>
  <a data-slide-index="3" href=""><img src="http://bxslider.com/images/730_200/tree_root.jpg" width="100" /></a>
  <a data-slide-index="4" href=""><img src="http://bxslider.com/images/730_200/hill_fence.jpg" width="100" /></a>
  <a data-slide-index="5" href=""><img src="http://bxslider.com/images/730_200/trees.jpg" width="100" /></a>
</div>

Jquery:

$('.bxslider').bxSlider({
  pagerCustom: '#bx-pager'
});

$('#bx-pager').bxSlider({
  mode: 'horizontal',
  pager: false
});

https://jsfiddle.net/w259nfeu/

回答1:

The top slider has no controls, it's movement is tied into the second slider/pager. The second slider looked weird with only one slide, so I made it a carousel with 3 slides moving one at a time. The rotation is:

Every click on an arrow advances both sliders in the same direction.
Every 6 clicks in one direction will cause the top slider to return to the same slide as the second slider's middle slide.
A click on one of the second slider's slide will make the first slider jump to the corresponding slide.

For some reason, the stack snippet is having DNS issues, so take a look at the

Demo: http://plnkr.co/edit/IytWudzqeXyYMzwIQnbA?p=preview

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>SO35203571</title>
  <link rel="stylesheet" href="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css" />
  <style>
    #bx-pager {
      left: 25px;
    }
    .bx-wrapper a.active {
      border: 2px solid red;
    }
    .bx-controls-direction a {
      top: -100% !important;
    }
  }
  </style>
</head>

<body>
  <ul class="bxslider">
    <li>
      <img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
    </li>
    <li>
      <img src="http://bxslider.com/images/730_200/me_trees.jpg" />
    </li>
    <li>
      <img src="http://bxslider.com/images/730_200/houses.jpg" />
    </li>
    <li>
      <img src="http://bxslider.com/images/730_200/tree_root.jpg" />
    </li>
    <li>
      <img src="http://bxslider.com/images/730_200/hill_fence.jpg" />
    </li>
    <li>
      <img src="http://bxslider.com/images/730_200/trees.jpg" />
    </li>
  </ul>
  <div id="bx-pager">
    <a data-slide-index="0" href="">
      <img src="http://bxslider.com/images/730_200/hill_trees.jpg" width="100" />
    </a>
    <a data-slide-index="1" href="">
      <img src="http://bxslider.com/images/730_200/me_trees.jpg" width="100" />
    </a>
    <a data-slide-index="2" href="">
      <img src="http://bxslider.com/images/730_200/houses.jpg" width="100" />
    </a>
    <a data-slide-index="3" href="">
      <img src="http://bxslider.com/images/730_200/tree_root.jpg" width="100" />
    </a>
    <a data-slide-index="4" href="">
      <img src="http://bxslider.com/images/730_200/hill_fence.jpg" width="100" />
    </a>
    <a data-slide-index="5" href="">
      <img src="http://bxslider.com/images/730_200/trees.jpg" width="100" />
    </a>
  </div>
  <script src="http://cdn.jsdelivr.net/jquery/2.2.0/jquery.min.js"></script>
  <script src="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
  <script>
    $(function() {

      var bx = $('.bxslider').bxSlider({
        pagerCustom: '#bx-pager',
        controls: false
      });

      var cx = $('#bx-pager').bxSlider({
        mode: 'horizontal',
        maxSlides: 3,
        minSlides: 3,
        moveSlides: 1,
        slideWidth: 275,
        slideMargin: 40,
        pager: false,
        onSlideBefore: bxMove
      });

      function bxMove($ele, from, to) {
        var idx = parseInt(to, 10) - 1;
        bx.goToSlide(idx);
      }

    });
  </script>
</body>

</html>

来源：https://stackoverflow.com/questions/35203571/bx-slider-active-class-not-working-when-using-with-pagercustom-which-is-also-sli

标签

jquery

bxslider