Показать слайдер JSSOR внутри модального окна

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

<div class="modal fade" id="deleteProductModal" tabindex="-1" role="dialog"      aria-labelledby="deleteProductModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg ">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="deleteProductModalLabel"></h4>
</div>
<div class="modal-body">
</div>
</div>

И это JQuery, который я использовал для загрузки динамических данных в модальное окно.
`

$(document).ready(function () {
$('#deleteProductModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var productid = button.data('productid') // Extract info from data-* attribute

$.ajax({
type : 'POST',
data : 'roomid='+productid,
url : "<?php echo base_url(); ?>index.php/HotelController/index",
success :   function(data){

var str_html = '<div class="row"><div class="col-md-8"> <div id="jssor_2" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: auto; height: 300px; overflow: hidden;">';
str_html += '<div data-u="loading" style="position: absolute; top: 0px; left: 0px;"><div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div><div style="position:absolute;display:block;top:0px;left:0px;width:100%;height:100%;"></div></div><div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: auto; height: 300px; overflow: hidden;">';

for(i=0;i<data.roomimages.length;i++)
{
str_html += '<div data-p="144.50"><img height="300" width="100%"" data-u="image" src="../../';
str_html += data.roomimages[i].image_path;
str_html += '"/><img height="100%" data-u="thumb" src="../../';
str_html += data.roomimages[i].image_path;
str_html += '"/></div>';
}

str_html += '</div><div data-u="thumbnavigator" class="jssort01" style="position:absolute;left:0px;bottom:0px;width:100%;height:72px;" data-autocenter="1"><div style="position: absolute; top: 0; left: 0; width: 100%; height:72px; background-color: #000; filter:alpha(opacity=30.0); opacity:0.3;"></div><div data-u="slides" style="cursor: default;"><div data-u="prototype" class="p"><div class="w"><div data-u="thumbnailtemplate" class="t"></div></div> <div class="c"></div></div> </div></div><span data-u="arrowleft" class="jssora02l" style="top:0px;left:8px;width:55px;height:55px;" data-autocenter="2"></span><span data-u="arrowright" class="jssora02r" style="top:0px;right:8px;width:55px;height:55px;" data-autocenter="2"></span></div></div><div class="col-md-4"><h5>Bed:';
str_html += '1 double bed';
str_html += '</h5> <h4> Room facilities:</h4><ul>'
str_html += '<p>Fitted with a terrace offering pool and garden views, each room features satellite TV, an electric kettle and a minibar. The en suite bathroom offers shower facilities and a hairdryer.</p><h4> Price Details:</h4><ul>'
if(data.roomdetails.price_only_bed!=null)
{
str_html +='<li>Rs.'
str_html += data.roomdetails.price_only_bed
str_html += '  - Room Only</li>'
}
if(data.roomdetails.price_bed_breakfast!=null)
{
str_html+='<li>'
str_html += 'Rs.'+data.roomdetails.price_bed_breakfast
str_html += '  - Fabulous Breakfast Included.</li>'
}
str_html+='</ul>';
str_html += '</div></div></div><div class="modal-footer"><ul class="row">'
var facilities_room=  JSON.parse(data.roomdetails.room_facilities) ;

for (x=0;x<facilities_room.length;x++)
{
str_html+='<li class= "col-md-3" style="text-align:left;">';
str_html+= facilities_room[x];
str_html+='</li>';
}
str_html+='</ul></div> </div></div>';
var title =   "Room Details  -  "+data.roomdetails.room_type + " Room";
var modal =   $('#deleteProductModal');
modal.find('.modal-title').text(title);
modal.find('.modal-body').html(str_html);
}
});
});
});`

Я инициализирую слайдер, используя следующий код.

  jQuery(document).ready(function ($) {
var jssor_2_SlideshowTransitions = [
{$Duration: 1200, x: 0.3, $During: {$Left: [0.3, 0.7]}, $Easing: {$Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
{$Duration: 1200, x: -0.3, $SlideOut: true, $Easing: {$Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
{$Duration: 1200, x: -0.3, $During: {$Left: [0.3, 0.7]}, $Easing: {$Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
{$Duration: 1200, x: 0.3, $SlideOut: true, $Easing: {$Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
{$Duration: 1200, y: 0.3, $During: {$Top: [0.3, 0.7]}, $Easing: {$Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
{$Duration: 1200, y: -0.3, $SlideOut: true, $Easing: {$Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
{$Duration: 1200, y: -0.3, $During: {$Top: [0.3, 0.7]}, $Easing: {$Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
{$Duration: 1200, y: 0.3, $SlideOut: true, $Easing: {$Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
{$Duration: 1200, x: 0.3, $Cols: 2, $During: {$Left: [0.3, 0.7]}, $ChessMode: {$Column: 3}, $Easing: {$Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
{$Duration: 1200, x: 0.3, $Cols: 2, $SlideOut: true, $ChessMode: {$Column: 3}, $Easing: {$Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
{$Duration: 1200, y: 0.3, $Rows: 2, $During: {$Top: [0.3, 0.7]}, $ChessMode: {$Row: 12}, $Easing: {$Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
{$Duration: 1200, y: 0.3, $Rows: 2, $SlideOut: true, $ChessMode: {$Row: 12}, $Easing: {$Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
{$Duration: 1200, y: 0.3, $Cols: 2, $During: {$Top: [0.3, 0.7]}, $ChessMode: {$Column: 12}, $Easing: {$Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
{$Duration: 1200, y: -0.3, $Cols: 2, $SlideOut: true, $ChessMode: {$Column: 12}, $Easing: {$Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
{$Duration: 1200, x: 0.3, $Rows: 2, $During: {$Left: [0.3, 0.7]}, $ChessMode: {$Row: 3}, $Easing: {$Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
{$Duration: 1200, x: -0.3, $Rows: 2, $SlideOut: true, $ChessMode: {$Row: 3}, $Easing: {$Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
{$Duration: 1200, x: 0.3, y: 0.3, $Cols: 2, $Rows: 2, $During: {$Left: [0.3, 0.7], $Top: [0.3, 0.7]}, $ChessMode: {$Column: 3, $Row: 12}, $Easing: {$Left: $Jease$.$InCubic, $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
{$Duration: 1200, x: 0.3, y: 0.3, $Cols: 2, $Rows: 2, $During: {$Left: [0.3, 0.7], $Top: [0.3, 0.7]}, $SlideOut: true, $ChessMode: {$Column: 3, $Row: 12}, $Easing: {$Left: $Jease$.$InCubic, $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
{$Duration: 1200, $Delay: 20, $Clip: 3, $Assembly: 260, $Easing: {$Clip: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
{$Duration: 1200, $Delay: 20, $Clip: 3, $SlideOut: true, $Assembly: 260, $Easing: {$Clip: $Jease$.$OutCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
{$Duration: 1200, $Delay: 20, $Clip: 12, $Assembly: 260, $Easing: {$Clip: $Jease$.$InCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2},
{$Duration: 1200, $Delay: 20, $Clip: 12, $SlideOut: true, $Assembly: 260, $Easing: {$Clip: $Jease$.$OutCubic, $Opacity: $Jease$.$Linear}, $Opacity: 2}
];
var jssor_2_options = {
$AutoPlay: true,
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: jssor_2_SlideshowTransitions,
$TransitionsOrder: 1
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$ThumbnailNavigatorOptions: {
$Class: $JssorThumbnailNavigator$,
$Cols: 9,
$SpacingX: 3,
$SpacingY: 3,
$Align: 260
}
};

var jssor_2_slider = new $JssorSlider$("jssor_2", jssor_2_options);

/*responsive code begin*/
/*you can remove responsive code if you don't want the slider scales while window resizing*/
function ScaleSlider1() {
var refSize = jssor_2_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 600);
jssor_2_slider.$ScaleWidth(refSize);
} else {
window.setTimeout(ScaleSlider1, 30);
}
}
ScaleSlider1();
$(window).bind("load", ScaleSlider1);
$(window).bind("resize", ScaleSlider1);
$(window).bind("orientationchange", ScaleSlider1);
/*responsive code end*/
});

На странице есть несколько кнопок, и когда кто-то нажимает
кнопка, модальное окно должно появиться и ползунок внутри модального
должен быть загружен динамическим набором изображений, которые являются специфическими для
этот идентификатор кнопки. Тот же слайдер прекрасно работает в модальном режиме без использования
динамический контент.

Буду признателен, если кто-нибудь сможет мне помочь с этим вопросом.