Question

I have a page with multiple instances of anythingSlider on it and I’m using PHP to dynamically load pages that swap out the content in them.

Reference: http://ceedcreative.com/CEED_2.0/

I would like to edit the anythingSlider to disable the previous / next buttons if the UL it’s displaying only has one LI within it.

In other words, no buttons, just a clean div that’s the same heigh and width (no scrolling) if there’s only one image.

Answer 1

Try this

$('.anythingSlider:not("#topSlider")').each(function(i, slider) {
    // If any slider has less than 2 let members
    if ( $("ul li", slider).length < 2 ) {
        // don't apply the slider functionality
        return;
    }

    $(slider).anythingSlider({
        easing: "easeInOutExpo",
        autoPlay: false,
        delay: 3000,
        startStopped: false,
        animationTime: 600,
        hashTags: false,
        buildNextPrevButtons: true,
        buildNavigation: false
    });
});

If, for some reason, that doesn’t work, this snippet will inspect the list length of every anythingSlider and hide the arrow buttons for any list that is only 1 in length (after excluding the front and back clones).

$(".anythingSlider").each(function(i, slider) {
    if ( $("ul li", slider).not(".cloned").length == 1 ) {
        $(".arrow", slider).hide();
    }
});