[Liberbox]

Камрады, помогите, пожалуйста, доработать скрипт.
Задача такая, чтобы при изменении разрешения экрана карусель динамически меняла размер, либо скрипт перезапускался с новыми параметрами ширины и высоты блоков и изображений. Вообщем, чтобы была резиновая карусель.
Значит имеется такаякарусель.
В ней ширина и высота изображения берутся автоматически исходя из размеров изображения.

/* These are univeral values that are used throughout the plugin. Do not modify them
     * unless you know what you're doing. Most of them feed off the options
     * so most customization can be achieved by modifying the options values */
    var pluginData = {
      currentCenterNum:     options.startingFeature,
      containerWidth:       0,
      containerHeight:      0,
      largeFeatureWidth:    0,
      largeFeatureHeight:   0,
      smallFeatureWidth:    0,
      smallFeatureHeight:   0,
      totalFeatureCount:    $(this).children("div").length,
      currentlyMoving:      false,
      featuresContainer:    $(this),
      featuresArray:        [],
      containerIDTag:       "#"+$(this).attr("id"),
      timeoutVar:           null,
      rotationsRemaining:   0,
      itemsToAnimate:       0,
      borderWidth:	 0
    };

Потом сss по размерам изображения задаётся таким образом

// Place all the features in a center hidden position to start off
      pluginData.featuresContainer
        // Have to make the container relative positioning
        .find(".carousel-feature").each(function () {
          // Center all the features in the middle and hide them
          $(this).css({
            'left': (pluginData.containerWidth / 2) - (pluginData.smallFeatureWidth / 2) - (pluginData.borderWidth / 2),
            'width': pluginData.smallFeatureWidth,
            'height': pluginData.smallFeatureHeight,
            'top': options.smallFeatureOffset + options.topPadding,
            'opacity': 0
          });
        })
        // Set all the images to small feature size
        .find(".carousel-image").css({
          'width': pluginData.smallFeatureWidth
        });

И рассчёт размеров в зависимости от положения изображения - фронт или бэк, производится так:

// Calculate new new css values depending on where the feature will be located
      if (newPosition == 1) {
        new_width = pluginData.largeFeatureWidth;
        new_height = pluginData.largeFeatureHeight;
        new_top = options.topPadding;
        new_zindex = $feature.css("z-index");
        new_left = (pluginData.containerWidth / 2) - (pluginData.largeFeatureWidth / 2) - (pluginData.borderWidth / 2);
        new_fade = 1.0;
      } else {
        new_width = pluginData.smallFeatureWidth;
        new_height = pluginData.smallFeatureHeight;
        new_top = options.smallFeatureOffset + options.topPadding;
        new_zindex = 1;
        new_fade = 0.4;
        // some info is different for the left, right, and hidden positions
        // left
        if (newPosition == pluginData.totalFeatureCount) {
          new_left = options.sidePadding;
        // right
        } else if (newPosition == 2) {
          new_left = pluginData.containerWidth - pluginData.smallFeatureWidth - options.sidePadding - pluginData.borderWidth;
        // hidden
        } else {
          new_left = (pluginData.containerWidth / 2) - (pluginData.smallFeatureWidth / 2) - (pluginData.borderWidth / 2);
          new_fade = 0;
        }
      }

Нашёл в сети, что это можно сделать с помощью .width и .resize, но как именно это реализовать понятия не имею. Всё методом тыка. Не кидайте тапками пожалуйста, я вообще юрист, только сайт решил сделать самостоятельно.

Вообщем пытался реализовать таким образом

$(function(){
if ( $(window).width() > 1366) { //проверяем разрешение экрана, если ширина больше 1366, скрипт срабатывает по дефолту со своими настройками
$("#carousel").featureCarousel({
	topPadding:0,
	sidePadding: 30,
	displayCutoff:3,
	trackerIndividual:false,
    trackerSummation:false
    	// include options like this:
        // (use quotes only for string values, and no trailing comma after last option)
        // option: value,
        // option: value
    });
}
$(window).resize(function() { //если разрешение экрана меняет юзер
if ( $(window).width() < 1366) {// в сторону уменьшения от 1366, тогда срабатывает скрипт с новыми настройками ширины и высоты блоков
    $("#carousel").featureCarousel({
	topPadding:0,
	sidePadding: 30,
	displayCutoff:3,
	trackerIndividual:false,
           trackerSummation:false,
	containerWidth: .5,
    containerHeight: .3,
	largeFeatureWidth: .5,
    largeFeatureHeight: .3,
    smallFeatureWidth: .1,
    smallFeatureHeight: .1
    });
}
});
});

Результат таков: при загрузке страницы, если ширина > 1366, всё нормально работает, при измении ширины в сторону уменьшения, скрипт перезапускается с новыми параметрами, НО криво.
Начинает мотать изображения из стороны в сторону не пойми как, кажется, что скорость вращения увеличилась, размеры изображений при этом постоянно меняются, однако, не меняются размеры основного блока containerWidth и containerHeight. Даже если делать блок-обёртку .carousel-container с max-width в сss, всё равно размер блока карусели не меняется. Если обратно вернуть к исходному разрешению, то скрипт НЕ перезапускается, а отрабатывает также с маленькими изображениями. Если обновить страницу при шириние <1366, скрипт сразу не срабатывает, а только после изменения ширины.

Вообщем потерялся я в этом лесу.
Помогите, пожалуйста, дилетанту.

Для наглядности прицеплю исходники, там всё видно