Question

I have installed the BX slider on the current site I am working on, this being a responsive site, I would like to change some options if the browser is at a certain width. The code I have written below breaks my layout for the slider though, any suggestions why?

<script type="text/javascript">

    $(document).ready(function() {

        if (width < 701) {

            $('#slidebx').bxSlider({
                mode: 'horizontal',
                infiniteLoop: true,
                speed: 500,
                pause: 5000,
                auto: true,
                pager: false,
                controls: true,
                displaySlideQty: 1,
                moveSlideQty: 1
            });

        } else {

            $('#slidebx').bxSlider({
                mode: 'horizontal',
                infiniteLoop: true,
                speed: 500,
                pause: 5000,
                auto: true,
                pager: false,
                controls: true,
                displaySlideQty: 4,
                moveSlideQty: 4
            });
        }
    });​

</script>

Answer 1

Is the width variable you’re checking in your if statement set some where?

Try this:

if ($(document).width() < 701) {
   ...
}