Sliderjs with dynamic content or images
<p>I'm heaving a problem and can't seem to find the/an answer. I use sliderjs from sliderjs.com to, obviously, create a slider panel. The script works great with hard coded html (<li> elements are rendered in a niceslideing panel).</p>

<p>Now I want to insert those ul, li elements dynamically with javascript. The problem is dat the sliderjs isn't formating the newly inserted code right. What am I doing wrong and what should I do to correct this. Any help is appreciated. The sliding panel only works on phone device.....</p>

<p>If I hardcode this than it works</p>

<pre><code>&lt;div id='slider' class='swipe' style='width:150px'&gt;
&lt;ul&gt;
&lt;li style='display:block'&gt;&lt;div&gt;1&lt;/div&gt;&lt;/li&gt;
&lt;li style='display:none'&gt;&lt;div&gt;2&lt;/div&gt;&lt;/li&gt;
&lt;li style='display:none'&gt;&lt;div&gt;3&lt;/div&gt;&lt;/li&gt;
&lt;li style='display:none'&gt;&lt;div&gt;4&lt;/div&gt;&lt;/li&gt;
&lt;li style='display:none'&gt;&lt;div&gt;5&lt;/div&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>This is my full code with the javascript that isn't working</p>

<pre><code> &lt;html&gt;
&lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /&gt;
    &lt;meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;" name="viewport" /&gt;
    &lt;style type="text/css"&gt;
        html{background-color:transparent;height:100%;width:100%;}
        body{background-color:transparent;font-size:11pt;font-family:helvetica;}
        img{border:0px;}        &lt;/style&gt;
    &lt;link rel="stylesheet" href="BTA_Blog_Leather_colors/brown/BTA_Blog_Leather_brown.css" type="text/css" /&gt;
    &lt;link rel="stylesheet" href="style.css" type="text/css" /&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
        $(document).ready(function(){
                          if ($(".date").text() === "--")
                          $(".datecontainer").hide();
                          if($('.thevideo iframe').attr('src') === ""){
                          console.log('11');
                          $(".videocontainer").hide();
                          }

                          var names = "http://profile.ak.fbcdn.net/hprofile-ak-snc4/187660_100002435611825_501947_q.jpg,http://www.deerns.nl/gfx/image.phtml?image=/images/_images_2012_website/employees/Nederland/Martijn%20Timmer_DIE2082.jpg&amp;width=50&amp;height=50&amp;type=crop,http://profile.ak.fbcdn.net/hprofile-ak-snc4/187660_100002435611825_501947_q.jpg";

var namesArray = names.split(",");
var item, items = [];

for (var i = 0; i &lt; namesArray.length; i++) {
    item = {};
    item.name = namesArray[i];
    items.push(item);
}

var main = $("&lt;ul&gt;");
var str = "&lt;li style='display:block;'&gt;&lt;div&gt;&lt;img src='http://profile.ak.fbcdn.net/hprofile-ak-snc4/187660_100002435611825_501947_q.jpg' /&gt;&lt;/div&gt;&lt;/li&gt;";
for (var i = 0; i &lt; items.length; i++) {
    str += "&lt;li style='display:none;'&gt;&lt;div&gt;&lt;img src='" + items[i].name + "' /&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ul&gt;";

}
main.html(str);
        $('#slider').append(main);

                          });
        &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="container"&gt;
        &lt;div class="navbar"&gt;
            &lt;div class="titlebox"&gt;
                &lt;div class="title"&gt;Gaat Europa het redden met de Euro? en met weet ik wat nog allemaal&lt;/div&gt;
            &lt;/div&gt;&lt;!-- end titlebox --&gt;
        &lt;/div&gt;&lt;!-- end navbar --&gt;
        &lt;div id="body"&gt;
            &lt;div class="header"&gt;
                &lt;div class="theimage"&gt;
                    &lt;div class="imagecontainer"&gt;
                        &lt;div class="image"&gt;&lt;!-- &lt;img src="http://www.celfoon.nl/bt-addons/testimage130x130.png" /&gt; --&gt;
                            &lt;div class="datecontainer"&gt;
                                &lt;div class="monthcontainer"&gt;
                                    &lt;div class="dmonth"&gt;[[DATEMONTH]]
                                    &lt;/div&gt; &lt;!-- en monthcontainer --&gt;
                                    &lt;div class="daycontainer"&gt;
                                        &lt;div class="dday"&gt;[[DATEDAY]]
                                        &lt;/div&gt;&lt;!-- end daycontainer --&gt;
                                        &lt;div class="yearcontainer"&gt;
                                            &lt;div class="dyear"&gt;[[DATEYEAR]]
                                            &lt;/div&gt; &lt;!-- end yearcontainer --&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;&lt;!-- end datecontainer --&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;&lt;!--end theimage --&gt;
            &lt;/div&gt;&lt;!-- end header --&gt;   
            &lt;div class="content"&gt;

                &lt;div class="introtextcontainer"&gt;
                    &lt;div class="introtext"&gt;
        &lt;div id='slider' class='swipe'&gt;

&lt;/div&gt;
&lt;a href='#' onclick='slider.prev();return false;'&gt;prev&lt;/a&gt;
&lt;a href='#' onclick='slider.next();return false;'&gt;next&lt;/a&gt;
&lt;br&gt;&lt;br&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="fulltextcontainer"&gt;
                    &lt;div class="fulltext"&gt;
                        [[FULLTEXT]]
                    &lt;/div&gt;&lt;!--end fulltext--&gt;
                &lt;/div&gt;&lt;!--end fulltextcontainer--&gt;


                &lt;div class="videocontainer"&gt;
                    &lt;div class="thevideo"&gt;
                        &lt;iframe allowfullscreen="" frameborder="0" height="174" src="[[YOUTUBE]]" width="280"&gt;&lt;/iframe&gt;
                    &lt;/div&gt;&lt;!-- end videocontainer --&gt;
                &lt;/div&gt;&lt;!-- end thevideo --&gt;                 
            &lt;/div&gt;&lt;!-- end content --&gt;
        &lt;/div&gt;&lt;!-- end body --&gt;
        &lt;div id="footer"&gt;
            &lt;div class="footertextcontainer"&gt;
                &lt;div class="footertext"&gt;[[FOOTERTEXT]]

                &lt;/div&gt;

            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;&lt;!-- end container --&gt;
    &lt;script src='swipe.js'&gt;&lt;/script&gt;
&lt;script&gt;
new Swipe(document.getElementById('slider'));
new Swipe(document.getElementById('slider2'));
var slider = new Swipe(document.getElementById('slider'));
var slider3 = new Swipe(document.getElementById('slider3'));
var slider4 = new Swipe(document.getElementById('slider4'));
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
