I am using a bxslider on my website with specific settings:
$('#carousel').bxSlider({
slideWidth: 146,
minSlides: 2,
maxSlides: 6,
speed:500,
adaptiveHeight: true,
moveSlides:3,
infiniteLoop : false,
hideControlOnEnd : true,
slideMargin: 10
});
Within this slider, there are various DOM elements structured as such:
<div class="itemClass_XX_YY carouselItem">
<div class="someClass"><img src="path/to/some/picture.png" /><span>SomeTitle</span></div>
</div>
In the code above, class="item_XX_YY", XX and YY represent categories that define each picture. For example, if animals are in category 1 (XX=1) and bears have an ID of 5 (YY=5), then each bear picture within the slider will be labeled item_1_5.
My goal is to filter items within my bxSlider dynamically. Currently, I achieve this using the following code:
$('.categoryList').click(function() {
var cat = $(this).data('category');
var type = $(this).data('type');
$('.carouselItem').hide();
$('.item_'+type+'_'+cat).show();
});
The filtering works correctly, but the bxSlider behaves oddly with hidden elements inside it. The "next" and "prev" buttons seem to count any hidden element as visible (which may not be desired).
However, I want the slider to disregard hidden elements. My question is, how can I filter the elements in my bxSlider without affecting the functionality of the prev/next buttons?
Edit: A fiddle demonstrating the issue is available at the following link:
http://jsfiddle.net/swrf991q/7/
After filtering, the next & previous buttons do not function properly, and the number of slides in the pager remains unchanged.