title: jQuery - jCarouselLite - Images are not showing up
body: <p>I have incorporated jCarouselLite with my already working site, however the PREV and NEXT buttons appear, but no IMAGES. The image links are correct.</p>
  
  <p>Any ideas?</p>
  
  <p>jQUERY:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      //jCarouselLite
      $(function() {
          $(".slider").jCarouselLite({
          btnNext: ".next",
          btnPrev: ".prev",
          visible: 4
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="list"&gt;           
  &lt;div class="prev"&gt;&lt;img src="images/prev.jpg" alt="prev" /&gt;&lt;/div&gt;
  &lt;div class="slider"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#" title="Title 1"&gt;&lt;img src="images/store_item_img.jpg" alt="Image 1" class="captify" /&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" title="Title 2"&gt;&lt;img src="images/store_item_img.jpg" alt="Image 2" class="captify" /&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" title="Title 3"&gt;&lt;img src="images/store_item_img.jpg" alt="Image 3" class="captify" /&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" title="Title 4"&gt;&lt;img src="images/store_item_img.jpg" alt="Image 4" class="captify" /&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" title="Title 5"&gt;&lt;img src="images/store_item_img.jpg" alt="Image 5" class="captify" /&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" title="Title 6"&gt;&lt;img src="images/store_item_img.jpg" alt="Image 6" class="captify" /&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" title="Title 7"&gt;&lt;img src="images/store_item_img.jpg" alt="Image 7" class="captify" /&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" title="Title 8"&gt;&lt;img src="images/store_item_img.jpg" alt="Image 8" class="captify" /&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="next"&gt;&lt;img src="images/next.jpg" alt="next" /&gt;&lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.slider {
   background-color:#3399FF;
   float:left;
   margin:15px; 
   position:relative; 
   visibility:hidden; 
  }
  
  .slider ul {
   height:180px;
   width:840px; 
  }
  
  .slider ul li {
   padding:0 20px;
  }
  
  .slider ul li img {
   cursor:pointer;
   height:150px; 
   padding-top:3px;
   width:180px;  
  }
  
  .prev {
   cursor:pointer; 
   float:left;
   padding-top:90px;
  }
  
  .next {
   cursor:pointer; 
   float:right; 
   padding-top:90px;
  }
  </code></pre>
  
  <p>SCRIPT:</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://www.theratio.net/js/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jcarousellite_1.0.1.pack.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/captify.tiny.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Please Help?</p>
  
  <p>:)</p>
  
  <p>UPDATE:</p>
  
  <p>If I remove</p>
  
  <pre><code>  $("#store_container").hide();
  </code></pre>
  
  <p>..and make it look like this, it works, however the div is opened first instead of closed.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(function(){
    $('#toggle').toggle(function(){
       $('#store_container').slideDown("slow", function() { $('#store_data').fadeIn(); });
     }, function() {
       $('#store_data').fadeOut("fast", function() { $('#store_container').slideUp("slow"); });
    });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>How can I made #store_container be closed with using .hide ? Or is there a way to show it after the function is clicked?</p>