Hi Craig,

window.slimmage.readyCallback is fired whenever Slimmage does it's Slimming (not just on initial load) which is often when the device is rotated or the browser is resized. As a solution you can do your own check to determine if it has already been called. e.g.

var sliderActive = false;

window.slimmage.readyCallback = function () {
    // Slider
    if (sliderActive == false) {
        sliderActive = true;
        if ($('.bxSlider').length > 0) {
            $('.bxSlider').bxSlider({
                mode: 'horizontal',
                captions: false,
                auto: true,
                speed: 5000,
                useCSS: true,
                responsive: true,
                controls: false,
                infiniteLoop: true
            });
        }
    }
}

Thanks Jeavon but that caused other issues that stalled the slider when changing browser size. It also didn't stop BxSlider going nuts, which is the main issue I'm having. We can't go live the slider behaving like this (http://test.tighruaraidh.co.uk/)

Thanks

It should be ok, did you try it with that check?

Yes. In Chrome it stalled the browser when resized. On the phone there was no difference. I'm convinced the issue is with BxSlider and not Slimmage. Pity couldn't get FlexSlider to work with it, it's a much better slider experience.

Strange, we have had very similar issues and have always resolved it using this method :(

When I make the browser smaller, the BxSlider just freezes. If I reload it, then it starts running again but if I then increase the browser size, the slider freezes again with the slider height stuck at it's previous height but the correct width image showing (albeit static). Not impressed with BxSlider at all. Is there really no way FlexSlider could be maybe called twice on page load to make Slimsy to it's stuff again so it shows the images full res?

Did you ever resolve this? Got a similar issue at the moment and bxSlider is not playing nicely with slimmage.

Hi Simon (2 years later!)

Thought I'd try bxSLider again to see if I could get responsive images in the slider of my latest project. Have failed miserably again. Using this as the initiator, the console.log message never appears. All I see is an unordered list of images, one on top of the other :(

$(function () {
    // Slider
    var sliderActive = false;
    window.slimmage.readyCallback = function () {
        console.log("Slimsy Ready");
        if (sliderActive == false) {
            sliderActive = true;
            if ($('.bxslider').length > 0) {                
                $('.bxslider').bxSlider();
            }
        }
    }
}

Absolutely fine with FlexSlider, just can't use GetResponsiveCrop with it. Because FlexSlider hides the images on load, they're not there for Slimsy to calculate size, so no images appear :( I'm giving up once again and keeping FlexSlider in. Would be nice to have responsive images for the slider but it's not a deal breaker.

Cheers

is working on a reply...