具有多个实例和自定义控件的 BXSlider答案

【问题标题】：BXSlider with multiple instances and custom controls具有多个实例和自定义控件的 BXSlider
【发布时间】：2014-05-25 00:14:41
【问题描述】：

我目前在我正在开发的网站上实现了 bxslider。有问题的页面上有 3 个滑块，带有自定义的下一个和上一个控件。

我已经使用类而不是 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' 
});

除了现在每个滑块上有 3 组控件之外，滑块加载正常 - 是否可以将上面的内容变成某种循环并让每个滑块使用自己独立的下一个和上一个按钮工作？

<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 Screenshot HERE

【问题讨论】：

标签： javascript jquery slider bxslider

【解决方案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

【讨论】：