javascript - 具有多个实例和自定义控件的 BXSlider

Question

我目前已经在我正在开发的网站上实现了 bxslider。相关页面上有 3 个 slider ，带有自定义下一个和上一个控件。

我使用类而不是 id 设置了 bxslider。

$('.carousel').bxSlider({
  minSlides: 3,
  maxSlides: 3,
  slideWidth: 139,
  slideMargin: 30,
  pager: false,
  nextSelector: '.carousel-next',
  prevSelector: '.carousel-prev',
  nextText: 'Onward →',
  prevText: '← Go back' 
});

除了现在每个 slider 上有 3 组控件外， slider 加载正常 - 有没有办法将上面的控件变成某种循环，并让每个 slider 使用自己独立的下一个和上一个按钮？

<div class="carousel-container">
<ul class="carousel">
<li><img src="images/beer.jpg" /></li>
<li><img src="images/beer.jpg" /></li>
<li><img src="images/beer.jpg" /></li>
<li><img src="images/beer.jpg" /></li>
<li><img src="images/beer.jpg" /></li>
<li><img src="images/beer.jpg" /></li>
<li><img src="images/beer.jpg" /></li>
<li><img src="images/beer.jpg" /></li>
</ul>       

<a class="carousel-prev"></a>
<a class="carousel-next"></a>                           
</div><!-- carousel-container -->

以下链接中的 slider 屏幕截图。

Slider Screenshot HERE

Answer 1

我遇到了这个问题并解决了:

$(document).ready(function () { $('.bxslider').bxSlider({ nextSelector: '#slider-next', prevSelector: '#slider-prev', controls: true, pager: false, nextText: '<img src="http://i.imgur.com/TZDsPC0.png" height="25" width="25"/>', prevText: '<img src="http://i.imgur.com/AKjTWvT.png" height="25" width="25"/>' }); });

Bxslider Custom Control