Question

I want:

autoplay: false when is width>900 in window size and ,

autoplay: true when is width<900 & width>701 in window size and ,

autoplay: false when is width<701 in window size

with jQuery flowslideshow and when the window is resized run this code

but notworking.

$(window).resize(function () {
var width = $(window).width();
if (width > 900) {
    $(function () {
        $(".slidetabs").tabs(".images > div", {
            // enable "cross-fading" effect
            effect: 'fade',
            fadeOutSpeed: "slow",
            // start from the beginning after the last tab
            rotate: true,
            showMultiple: 5
            // use the slideshow plugin. It accepts its own configuration
        }).slideshow({ **autoplay: false**, clickable: false });
    });
}
else if (width < 900 & width > 701) {
    $(function () {
        $(".slidetabs").tabs(".images > div", {
            // enable "cross-fading" effect
            effect: 'fade',
            fadeOutSpeed: "slow",
            // start from the beginning after the last tab
            rotate: true,
            showMultiple: 5
            // use the slideshow plugin. It accepts its own configuration
        }).slideshow({ **autoplay: true**, clickable: false });
    });
}
else (width < 701)
{
    $(function () {
        $(".slidetabs").tabs(".images > div", {
            // enable "cross-fading" effect
            effect: 'fade',
            fadeOutSpeed: "slow",
            // start from the beginning after the last tab
            rotate: true,
            showMultiple: 5
            // use the slideshow plugin. It accepts its own configuration
        }).slideshow({ **autoplay: false**, clickable: false });
    });
}    });

Answer 1

The onResize event of the window does not always fire on page load, so the slideshow wouldn’t autoplay in that case. It does appear to fire on page load in ie9.

Also, this code would recreate the slideshow every time the page is resized – which is probably not what you want either.

You might be better binding the slideshow on page load, and then binding an event to resize that pauses / resumes the slide behaviour. Like this:

jQuery(function($) {
    // detect window size and init slideshow here
    $(window).on('resize', function () {
        // detect window size and pause or resume the slideshow
    });
});

Without seeing the docs for the slideshow you’re using I can’t point you in the direction of exactly how to modify the slideshow after it’s initialised, but it should be possible if you follow the principle above.

(On a side note, to check the resize event is being triggered correctly, you could console.log($(window).width()))

If you need more help, consider posting a Fiddle with the full example in it, and link to the docs for the slideshow plugin you’re using.