Question

i’m using the bxSlider plugin (a slider similar to jcarousel) on custom Magento store.

While the slider is istantiated on documet.ready() (in the head html section) by this way:

jQuery('#slider2').bxSlider({
    pause: 4000,
    auto: true,
    autoControls: true,
    displaySlideQty: 4,
    moveSlideQty: 1
});

I want to change auto attribute to false in the php code if the slider items count is less than 5. I’ve tried to change it with:

<?php
    // slider items count
    $prom_count = $this->getPromotionalProducts()->count();;
?>
<?php if($prom_count<5): ?>
    <script>
        $("#slider2").attr('auto','false');    
    </script>
<?php endif; ?> 

but it doesn’t work, so i’m not sure that attribute of objects instantiated on dom ready can be changed by this way. anybody could help?

Answer 1

The attr-method from the jQuery-library works with attributes for HTML-elements:

<img src="..." alt="...">

In this case, src and alt are “attributes”.

The bxSlider is configured by giving the bxSlider-function an array. You can’t alter this array after it was passed to the function.

What you can do to toggle the auto-show is using bxSlider’s stopShow()-function. To probably do this, you’ll want to save the bxSlider-instance you created:

var slider = jQuery('#slider2').bxSlider({
   ...
});

So you can then call the function on this object:

slider.stopShow();

Doing this with PHP and JavaScript in a mixed way (like you suggested) is ugly and should be avoided.

Instead, you should use a JavaScript-only solution:

var slider = jQuery('#slider2').bxSlider({
   auto: true,
   ...
});
if (slider.getSlideCount() < 5){
  slider.stopShow();
}

Note that getSlideCount() returns the number of slides, which is not guarantied to be the number of Images in the gallery! The number of slides displayed at once can be set by the displaySlideQty-attribute. The default however is 1.

---

It seams that there is a Bug which causes the startShow and stopShow-functions not to work: https://github.com/wandoledzep/bxslider/pull/43

As a dirty workaround, you could do something like this:

<?php
    echo "<script type=\"text/javascript\">
        jQuery('#slider2').bxSlider({
            pause: 4000,
            autoControls: true,
            displaySlideQty: 4,";
    if($prom_count >= 5) echo "auto: true,";
    echo "moveSlideQty: 1
        });
    </script>";
?>