iDangerous Swiper slider, custom overlay not scaling down with the restslider

Question

I have this slider which is using the iDangerous Swiper plugin.

Her is the fiddle: http://jsfiddle.net/2vNTw/1/

The swiper slider is set to carousel-mode and has a max-width of 1275px. In this I have made an custom overlay for the inactive images/images that is not in centre. The overlay works fine when it is not scaled down, but when scaling down, the overlay also overlays the centered/active slide, which it shouldn't.

The scaling is made with jQuery:

THE JQUERY SCALING:

/* On Load swiper height should adjust to img size */
    jQuery('.swiper-slide img').load(function() {
        jQuery('.swiper-container').height(jQuery('.swiper-slide img').height());
        jQuery('.swiper-wrapper').height(jQuery('.swiper-slide img').height());
    });

    /* On Resize swiper height should adjust to img size */
    jQuery(window).resize(function() {
        jQuery('.swiper-container').height(jQuery('.swiper-slide img').height());
        jQuery('.swiper-wrapper').height(jQuery('.swiper-slide img').height());
    });

Is it possible to get the overlay to scale also?

Answer 1

That is the CSS basics. Just add position:relative to .swiper-slide