Fill list up to 10 items
<p>I'm looking for a way to fill a <code>&lt;ul&gt;</code> list up to 10 item. If the list doesn't have 10 in the HTML, I want the items to repeat themselves.</p>

<p>For example:</p>

<pre><code>&lt;ul id="carousel"&gt;
  &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>I tried to do it myself, but it's not exactly working they way I want it to:</p>

<pre><code>  max_slides = 10;

  slides_holder = $('#carousel');
  all_slides = $('#carousel li');
  number_of_slides = all_slides.length;
  number_of_slides_to_add = max_slides - number_of_slides;

  if( number_of_slides &lt; max_slides)
  {
    slides_to_add = $('#carousel li:lt('+number_of_slides_to_add+')').clone();
    slides_holder.append(slides_to_add);
  }

  // $('#carousel').initiateCarousel();
</code></pre>

<p>It should become this:</p>

<pre><code>&lt;ul id="carousel"&gt;
  &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>The items should repeat themselves. It only works when there are 5 items or more...
The reason is this: I'm using a special carousel plugin that should always have 10 items at all times. If it doesn't, it starts to act funky.</p>

<p>Thanks for any help.</p>
