Question

我目前在我正在处理的网站上实施了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屏幕截图。

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

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

1 个答案: