Dynamically generate multiple BX Sliders

readme

Use this if you need to have multiple slideshows on one page but are unsure how many will be needed.

Markup:

<div class="gallery">
    <img src="http://placehold.it/300" />
    <img src="http://placehold.it/300" />
    <img src="http://placehold.it/300" />
</div>

<div class="gallery">
    <img src="http://placehold.it/300" />
    <img src="http://placehold.it/300" />
    <img src="http://placehold.it/300" />
</div>

multiple.bxslider.js

$(function () {

    var bxSliderInstances = {};

    // Use a class rather than an ID
    var $slider = $('.mini-slider');

    // For each result
    $slider.each(function (index, element) {

        // If there is more than 1 image
        if ($(element).find('img').length > 1) {

            // Initialise a slider using the current index value
            bxSliderInstances['slider' + index] = $slider.eq(index).bxSlider({
                auto: false,
                pager: false,
                prevText: '←',
                nextText: '→',
                duration: 500
            });

        }

    });

    $('#button').click(function (e) {

        e.preventDefault();

        // Use public functions
        bxSliderInstances.slider1.goToNextSlide();

    });

});

Issue: Can't use public functions on the slider

How about if you have pagerCustom in use?
Can you slider whit the bx-pager multiple.

pagerCustom: '.bx-pager' + index,

Bit late but for anyone that is looking for a solution to this:

// For each Container where we want to add a slider
    $('.magazine-slider ul').each(function (index) {


        // if there are more than one slide then add a slider
        if ($(this).children('li').length > 1) {

            // initiate slider
            var slider = $(this).bxSlider({
                caption: false,
                minSlides: 1,
                maxSlides: 1,
                slideWidth: 912,
                slideMargin: 0,
                adaptiveHeight: false,
                pager: false,
                controls: false
            });

            // Trace a unique path from each element and add next and prev functionality
            $(this).parents('.magazine-slider').children('.next').click(function () {
                slider.goToNextSlide();
                return false;
            });
            $(this).parents('.magazine-slider').children('.previous').click(function () {
                slider.goToPrevSlide();
                return false;
            });
            // Otherwise hide the next and previous custom buttons
        } else {
            $('.magazine-slider ul span').hide();
        }
    });