Flexslider не работает с автоматически созданным контентом с JQuery

Question

У меня есть текстовая область, содержащая содержимое сообщения, я хочу создать слайдер с плагином Flexslider JQuery, когда сообщение имеет больше изображения, но, к сожалению, плагин не работает.

HTML КОД

<textarea id='summary7731158085902631382' style='display:none;'> 
<div dir="ltr" style="text-align: left;"> 

<a href="http://1.bp.blogspot.com/-tqkOgHfEp10/VKHDxv709UI/AAAAAAAABKo/IA6lz5cdGfE/s1600/unsplash_1.jpg"> 
<img src="http://1.bp.blogspot.com/-tqkOgHfEp10/VKHDxv709UI/AAAAAAAABKo/IA6lz5cdGfE/s1600/unsplash_1.jpg" /> 
</a> 

<a href="http://1.bp.blogspot.com/-88jaynpnczQ/VKHDxr9NHXI/AAAAAAAABKs/PusKWOwGCYw/s1600/unsplash_2.jpg"> 
<img src="http://1.bp.blogspot.com/-88jaynpnczQ/VKHDxr9NHXI/AAAAAAAABKs/PusKWOwGCYw/s1600/unsplash_2.jpg" /> 
</a> 

<a href="http://3.bp.blogspot.com/-JY0gtfw46YY/VKHDxgz63KI/AAAAAAAABK0/r0mvJkP_FE0/s1600/unsplash_3.jpg"> 
<img src="http://3.bp.blogspot.com/-JY0gtfw46YY/VKHDxgz63KI/AAAAAAAABK0/r0mvJkP_FE0/s1600/unsplash_3.jpg" /></a> 

<br /> 

<p>Cras sit amet libero eros, in ultricies lorem. Nunc et odio neque. Maecenas vehicula interdum hendrerit. Integer hendrerit orci ullamcorper neque pellentesque feugiat. Aliquam magna metus, fringilla non ultrices id, fringilla eu erat. Phasellus lorem tortor, porttitor volutpat iaculis sed, condimentum ultricies massa. Curabitur ut malesuada elit. Nullam tortor mi, faucibus a laoreet a, ultricies ut est. Etiam erat urna, dapibus vitae sodales eu, sagittis ut nisl. Curabitur vitae tristique felis. Donec consectetur porttitor lectus ac pharetra. Mauris nulla nisi, congue quis eleifend at, dapibus eget augue. Curabitur nunc sem, feugiat sit amet facilisis quis, laoreet id mi. 
</p> 
</div> 
</textarea> 
<div id='content'></div> 

Jquery КОД

var sum = '', 
    content = $('#summary7731158085902631382').val(), 
    imgs = $(content).find('img'); 

if (imgs.length > 1) { 
    sum = '<div class="flexslider"><ul>'; 
    for (var i = 0; i < imgs.length; i++) { 
    var img = imgs[i].src; 
    sum += '<li><a href="' + img + '"><img alt="" src="' + img + '"></a></li>'; 
    } 
    sum += '</ul></div>'; 
} 
$('#content').html(sum); 
$('.flexslider').flexslider({ 
    animation: "slide", 
    controlNav: false, 
    smoothHeight: true, 
    prevText: "", 
    nextText: "" 
}); 

Fiddle DEMO

Answer 1

просто добавить один класс уль тег, то есть "слайд": Fiddle

sum = '<div class="flexslider"><ul class="slides">';