jssor - Adding action buttons to a caption - jssor

Question

Great api, clean and easy to use.
Question, how do I make it so I can include action items in a caption bar? I'd like to add buttons like the ability to remove an image etc.
I tried setting the slider height to 300, with image # 250 and caption #50, but with overflow: hidden on the slides attribute, it hides the caption bar.
Update
RedactorPlugins._imageManager = function()
{
return {
renderImages: function(\$el, payload)
{
var html = '';
html += '<div id="slider-1-wrap" style="position: relative; top: 0px; left: 0px; margin: auto; width: 600px; height: 300px;">';
html += ' <div u="slides" style="cursor: move; position: absolute; left: 0px; to; width: 600px; height: 300px; overflow:hidden;">';
html += ' <div>';
html += ' <img src="http://www.engraversnetwork.com/files/placeholder.jpg" style="position: absolute; top: 0px; left: 0px; width: 600px; height: 250px;" />';
html += ' <div style="position: absolute; top: 250px; left: 0px; width: 600px; height: 50px;">';
html += ' <span style="cursor:pointer;" id="test1">Slot #1</span>';
html += ' </div>';
html += ' </div>';
html += ' <div>';
html += ' <img src="http://www.engraversnetwork.com/files/placeholder.jpg" style="position: absolute; top: 0px; left: 0px; width: 600px; height: 250px;" />';
html += ' <div style="position: absolute; top: 250px; left: 0px; width: 600px; height: 50px;">';
html += ' <span style="cursor:pointer;" id="test2">Slot #2</span>';
html += ' </div>';
html += ' </div>';
html += ' </div>';
html += '</div>';
$('#test1, #test2').click(function() {
console.log('hai');
});
var options = {};
\$el.append(html);
var jssor_slider1 = new \$JssorSlider\$('slider-1-wrap', options);
},
}}
When I click on the slot # text, I keep getting this error: Uncaught TypeError: elmt.getAttribute is not a function

Answer 1

Fixed it with hack :(
function Attribute(elmt, name, value) {
// #HACK: Be careful when updating api...
if (undefined === elmt.tagName) {
elmt = CreateElement('DIV');
$(elmt).attr('class', 'created');
}
if (value == undefined)
return elmt.getAttribute(name);
elmt.setAttribute(name, value);
}

Answer 2

Please try the following codes.
<div u="slides" style="cursor: move; position: absolute; left: 0px; to; width: 600px; height: 300px; overfidden;">
<div>
<img src="url" style="position: absolute; top: 0px; left: 0px; width: 600px; height: 250px;" />
<div style="position: absolute; top: 250px; left: 0px; width: 600px; height: 50px;">
<!-- your caption content here -->
</div>
</div>
</div>