如何将JavaScript变量作为属性存储在对象内部

// USER EDITABLE CONTROLS
    var defControls = {
        content : 'img',
        showControls : true,
        prevText : '« Previous', // previous button text
        nextText : 'Next »', // next button text
        containerWidth : 600 // property to be determined by image in the DOM
    };

    // VARIABLE DECLARATIONS
    var controls = {};

    // CHECKS FOR userControls
    if (typeof userControls !== 'undefined') {
        var controls = Object.assign({}, defControls, userControls);
    } else {
        controls = defControls;
    }
    
    var contentType = $(controls.content);
    var $el = $('#showcase');
    var $leftArrow = '#left_arrow';
    var $rightArrow = '#right_arrow';
    var $load = $el.find(contentType)[0];
    
    // PRELOADS CAROUSEL WITH CORRECT SETTINGS
    $el.css('width', controls.containerWidth);
    $load.className = 'active';

    $(window).on('load', function () {
        if (controls.content == 'img') {
            controls.containerWidth = $el.children().width();
            console.log($el.children().width()); // fetches the width of the DOM img
            console.log(controls.containerWidth); // shows the width is being updated but the #showcase div remains at 600px
        }
    })
    
    // ADD CAROUSEL CONTROLS TO PAGE
    if (controls.showControls === true) {
        $('<div id="controls"><a href="#" id="' + $leftArrow.replace('#', '') + '">' + controls.prevText + '</a> <a href="#" id="' + $rightArrow.replace('#', '') + '">' + controls.nextText + '</a></div>').insertAfter('#showcase');
        $('#controls').find('#left_arrow').addClass('disabled');
    }

* {
	margin: 0px;
	padding: 0px;
}

#showcase {
	overflow: hidden;
	background: green;
}

img {
	width: 268px; /* Temporary - image width will be adjusted in the JS */
}

a {
	color: blue;
}

.disabled {
	color: red !important;
}

.slide {
	display: none;
	opacity: 0;
	position: relative;
	left: 0px;
	right: 0px;
}

.active {
	display: inline-block;
	opacity: 1;
	position: relative;
	left: 0px;
	right: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showcase">
	<img class="slide" src="https://picsum.photos/458/354/?image=306" />
	<img class="slide" src="https://picsum.photos/458/354/?image=626" />
	<img class="slide" src="https://picsum.photos/458/354/?image=806" />
</div>