CODEWITHSUNDEEP
javascriptjquerysliderbxslider
user3672772
user3672772

Reputation: 1

BXSlider with multiple instances and custom controls

i have currently implemented bxslider on a site i am working on. The page in question has 3 sliders on it with custom next and previous controls.

I've setup the bxslider using a class instead of an id.

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

The sliders load ok apart from there are 3 sets of controls on each slider now - is there anyway to turn the above into some sort of loop and have each slider work with their own independent next and previous buttons?

<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 in the below link.

Slider Screenshot HERE

Upvotes: 0

Views: 1289

Answers (1)

user4540007
user4540007

Reputation:

I have this problem and solved with this:

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

Upvotes: 2

Related Questions