title: bxSlider, content slides in on document ready
body: <p>I am using the bxSlider (http://bxslider.com/) to display content in carousel-sort of way. Now my art director wants me to make sure that the visitors understand that there is more content to be had if the pager-icons are clicked. To indicate this, he wants the first slide to slide in from the right, when content has finished loading.</p>
  
  <p>I tried to achieve this using jquery's: show("slide", { direction: "right" }, 1000); on the containing ul. But the sliding effect isn't achieved. Instead, it just plainly pops into view.</p>
  
  <p>Anyone who knows why this behaves this way or know another way to achieve this? </p>
  
  <p>Code:</p>
  
  <pre><code>&lt;script type="text/javascript&gt;
  $(document).ready(function () {
  
          var slides = $("#eventslider&gt;li");
  
          if (slides.length &lt; 4) {
              $('#next-button').hide();
          }
  
          var slider = $('#eventslider').bxSlider({
              controls: false,
              mode: 'horizontal',
              displaySlideQty: 3,
              moveSlideQty: 3,
              infiniteLoop: false,
              hideControlOnEnd: true
          });
  
          setTimeout("showSlider()", 1000);
  
  
      });
  
      function showSlider() {
          $("#eventslider").show('slide', { direction: 'right' }, 1000);
      }
  &lt;/script&gt; 
  
  &lt;ul id="eventslider" style="display:none"&gt;
  
      &lt;li&gt;
          &lt;p class="date"&gt;
              2011-12-31&lt;/p&gt;
  
          &lt;h3&gt;&lt;a href="http://domain/en-gb/events_training/Pages/Event-wo-Image.aspx"&gt;
              Event wo Image&lt;/a&gt;&lt;/h3&gt;
          &lt;p class="rollUp"&gt;Lorem ipsum dolor, sit amet&lt;/p&gt;
  
          &lt;p&gt;
              &lt;a href="http://domain/en-gb/events_training/Pages/Event-wo-Image.aspx"&gt;
                  Read more
              &lt;/a&gt;
          &lt;/p&gt;
      &lt;/li&gt;
  
      &lt;li&gt;
          &lt;p class="date"&gt;
              2011-12-16&lt;/p&gt;
          &lt;div class="imagecontainer"&gt;&lt;a href="http://domain/se/events_training/Pages/Lokal-händelse-sverigeen-GB.aspx"&gt;&lt;img src="/SiteCollectionImages/industries/top/yellowcoats.jpg" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;            
          &lt;h3&gt;&lt;a href="http://domain/se/events_training/Pages/Lokal-händelse-sverigeen-GB.aspx"&gt;
              Local event sweden&lt;/a&gt;&lt;/h3&gt;
          &lt;p class="rollUp"&gt;Vad som helst&lt;/p&gt;
  
          &lt;p&gt;
              &lt;a href="http://domain/se/events_training/Pages/Lokal-händelse-sverigeen-GB.aspx"&gt;
                  Read more
              &lt;/a&gt;
          &lt;/p&gt;
      &lt;/li&gt;
  
      &lt;li&gt;
          &lt;p class="date"&gt;
              2011-12-14&lt;/p&gt;
  
          &lt;h3&gt;&lt;a href="http://domain/en-gb/events_training/Pages/Older-event.aspx"&gt;
              Older event&lt;/a&gt;&lt;/h3&gt;
          &lt;p class="rollUp"&gt;asfasdf&lt;/p&gt;
  
          &lt;p&gt;
              &lt;a href="http://domain/en-gb/events_training/Pages/Older-event.aspx"&gt;
                  Read more
              &lt;/a&gt;
          &lt;/p&gt;
      &lt;/li&gt;
  
      &lt;li&gt;
          &lt;p class="date"&gt;
              2011-10-19&lt;/p&gt;
          &lt;div class="imagecontainer"&gt;&lt;a href="http://domain/en-gb/events_training/Pages/Test.aspx"&gt;&lt;img src="/SiteCollectionImages/126084-matte-white-square-icon-transport-travel-transportation-airplane1.png" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;            
          &lt;h3&gt;&lt;a href="http://domain/en-gb/events_training/Pages/Test.aspx"&gt;
              Test&lt;/a&gt;&lt;/h3&gt;
          &lt;p class="rollUp"&gt;Test again&lt;/p&gt;
  
          &lt;p&gt;
              &lt;a href="http://domain/en-gb/events_training/Pages/Test.aspx"&gt;
                  Read more
              &lt;/a&gt;
          &lt;/p&gt;
      &lt;/li&gt;
  
      &lt;/ul&gt;
  </code></pre>
  
  <p>Regards,
  Rikard</p>