title: Jquery Mobile Slideshow
body: <p>Can anybody help to get the image slideshow? Now the images just totally pasted on the webpage. Got totally lost! Tks! I will paste her html, js and css (3parts). I could not post this post owing to less details. I write here just some extra test, hopes that it is understandable.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
      &lt;html&gt;
          &lt;head&gt;
          &lt;title&gt;Panda&lt;/title&gt;
  
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"/&gt;
          &lt;link rel="stylesheet" href="jquery.mobile-1.4.0.min.css"/&gt;
          &lt;link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" /&gt;
  
          &lt;link rel="stylesheet" href="gallerytest.css"/&gt;
  
  
          &lt;link rel="stylesheet" href="gallerytest.css"/&gt;
          &lt;script src="jquery-2.0.3.min.js"&gt;&lt;/script&gt;
          &lt;script src="jquery.mobile-1.4.0.min.js"&gt;&lt;/script&gt;
  
          &lt;script src="jquery-ui-1.10.4"&gt;&lt;/script&gt;
          &lt;script src="slide.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body onload="Slider();"&gt; 
          &lt;div data-role="page" id="Home" data-theme="a"&gt;
              &lt;div data-role="header" &gt;
                  &lt;div data-role="navbar"&gt;
                  &lt;ul id="header"&gt;
                          &lt;li&gt;&lt;a href="home.html"&gt;&lt;img src="images/home-black.png"/&gt;&amp;nbsp Home&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="donate.html"&gt;Donate&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="about.html"&gt;&lt;img src="images/info-black.png"/&gt;&amp;nbsp About&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;  
          &lt;div role="main" class="ui-content"&gt;
                  &lt;h1 style="text-align:center"&gt;Gallery&lt;/h1&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div data-role="content" &gt;  
          &lt;div class="slider"&gt;
                  &lt;img id="1" src="images/full/001.jpg" border ="0" alt="Image001" /&gt;
                  &lt;img id="2" src="images/full/002.jpg" border ="0" alt="Image002" /&gt;
                  &lt;img id="3" src="images/full/003.jpg" border ="0" alt="Image003" /&gt;
                  &lt;img id="4" src="images/full/004.jpg" border ="0" alt="Image004" /&gt;
                  &lt;img id="5" src="images/full/005.jpg" border ="0" alt="Image005" /&gt; 
                  &lt;img id="6" src="images/full/006.jpg" border ="0" alt="Image006" /&gt;
                  &lt;img id="7" src="images/full/007.jpg" border ="0" alt="Image007" /&gt;
                  &lt;img id="8" src="images/full/008.jpg" border ="0" alt="Image008" /&gt;
                  &lt;img id="9" src="images/full/009.jpg" border ="0" alt="Image009" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div data-role="footer"&gt;
              &lt;div data-role="navbar"&gt;
              &lt;ul id="footer"&gt;
                      &lt;li&gt;&lt;a href="card.html"&gt;Send me a Card!&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="donate.html"&gt;Donate&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="contact.html"&gt;Contact me&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;          
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.slider{
      width:600px;
      height:600px;
      overflow:hidden;
      margin:0;
      background-image:url('images/ajax-loader.gif');
      background-repeat:no-repeat;
      background-position:center;
      background:red;
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(document).on("pageinit", function() {
      $(".slider #1").show("fade", 500);
      $(".slider #1").delay(5500).hide("slide", {direction:"left"},500);
      var sc=$(".slider img").size();
      var count=2;
      setInterval(function(){
          $(".slider#+count).show("slide",{direction:'right'},500};
          $(".slider#+count).delay(5500).hide("slide"{direction:"left"},500);
          if (count==sc) {
              count=1
          } else {
          count=count+1
          }
      }, 6500);
  });
  </code></pre>