Dynamically resizing panels based on browser window size I've just finished building my responsive carousel currently trying to optimize my code to make it more efficient. I've created a number of if conditions in my carousel, what does it sets the sizes of each elements based on the condition. Is there a way to reduce the number of if statements.

    var carouselWidth = 0,
        slider = $('.carousel .slider'),
        carouselContainerWidth = $('.carousel').width(),
        carouselPanel = $('.carousel .slider .panel'),
        browserWindow = $(window),
        sliderWidth = $('.carousel .slider').width();


    //Set Different Size of Image Panels based on Browser Size
    ///////////////////////////////////////////////////////////

    //Display 5 Panels
    if ($(browserWindow).width() &gt;= 1500 ) {
        var setPanelWidth = carouselPanel.outerWidth( carouselContainerWidth / 5, true ),
            panelSize = setPanelWidth.outerWidth();
    }

    //Display 4 Panels
    if ($(browserWindow).width() &lt; 1500) {
        var setPanelWidth = carouselPanel.outerWidth( carouselContainerWidth / 3, true ),
            panelSize = setPanelWidth.outerWidth();
    }

    //Display 3 Panels
    if ($(browserWindow).width() &lt; 1120) {
        var setPanelWidth = carouselPanel.outerWidth( carouselContainerWidth / 2, true ),
            panelSize = setPanelWidth.outerWidth();
    }

    //Display 1 Panels
    if ($(browserWindow).width() &lt; 768) {
        var setPanelWidth = carouselPanel.outerWidth( carouselContainerWidth / 1, true ),
            panelSize = setPanelWidth.outerWidth();
    }
The problem is basically calculating the number of panels.
I'm no expert in media queries, but this is how i would solve it using js:

function PanelCount(lowerBound, upperBound, panelCount) {
  this.lowerBound = lowerBound;
  this.upperBound = upperBound;
  this.panelCount = panelCount
  this.isApplicableToContainerWidth = function(containerWidth) {
    return lowerBound &lt;= containerWidth&amp;&amp; containerWidth&lt; upperBound;
  };
}

function getCorrectPanelCount(containerWidth) {
    var panelCounts = [];
    panelCounts.push(new PanelCount(1500, Number.MAX_SAFE_INTEGER, 5));
    panelCounts.push(new PanelCount(1120, 1500, 3));
    panelCounts.push(new PanelCount(768, 1120, 2));
    panelCounts.push(new PanelCount(0, 768, 1));

    for (i = 1; i &lt; panelCounts.length; i++) {
      if (panelCounts[i].isApplicableToContainerWidth(containerWidth)) {
        return panelCounts[i].panelCount;
      }
    }
}


Naming needs some improvement though, PanelCount is a horrible class name