CarouFREDSel plugin: Media query triggered resizable images in the carousel

I have this carousel as a wordpress plugin which looks like this (full browser window width):

When I resize the browser window the size of the images are the same until a media query is triggered:

@media screen and (min-width: 1470px) {
    #image-carousel { height: 500px; }
    #carousel-images img { width: 980px; height: 500px; }

    #prev, #next { height: 500px; }
    #prev { left: -490px; }
    #next { right: -490px; }
}

@media screen and (min-width: 500px) and (max-width: 1470px) {
    #image-carousel { height: 383px; }
    #carousel-images img { width: 750px; height: 383px; }

    #prev, #next { height: 383px; }
    #prev { left: -375px; }    
    #next { right: -375px; }
}

Then I resize the divs that needs resizing, and the images scales down correctly, but this happens:

The images are “uncentered”. Some process that happens in the creation of the carousel isn’t triggered (naturally). The way I’ve solved this now is this: (I know the javascript isn’t DRY, this is just an example)

onCreate: function (data) {
    $(window).resize( function () {
        if( $(window).width() > 1470 ) {
            $(".dev7-caroufredsel-carousel").carouFredSel({
                // Create the carousel again...    
            });
        } else if ( $(window).width() <= 1470 ) {
            $(".dev7-caroufredsel-carousel").carouFredSel({
                // Create the carousel again...    
            });
        }
    });
}

In the onCreate event for the carousel I bound the window resize event up to recreate the carousel when the browser window passes the given limit. This works, and I don’t think it’ll be a problem, but…

This seems like a bad thing to do, and not the proper way, and I am wondering how do I do this properly?