How do I create and elimate a carousel based on media queries?

How do I create and elimate a carousel based on media queries?

I have a row of images that are supposed to appear on my page unless the
window is 320px or below. If the window is 320px or below then I have
images being placed in a carousel. The problem I am having is that I am
trying to figure out how to get rid of the carousel when the window is
more 320px. So the scenario would be on a mobile device when a user
changes he orientation from portrait to horizontal I want the images to be
in a carousel when the device is portrait and in a row when landscape.
Here is the code I have so far:
<div class="carousel">
<img src="endlessSummer_154x176.jpg">
<img src="visa_154x176_new.jpg">
<img src="lifestyle_240x176_new_v2.jpg">
<img src="nfl_cy_410x176_new.jpg">
</div>
$(window).resize(function(){
if ( $(".carousel").css("width") === "320px") {
$(".carousel").carouFredSel();
}else{
$('.carousel').destroy();
}
});