JQuery swap plugin that works with an odd page structure

Question

I added the jQuery plugin to our websites, which currently work as they please, however it breaks when two elements should be unloaded on the page. I asked the plugin developer about this and it confirms that it was designed with only one element per page.

So, I went looking for another pager plugin, but all the ones that I found cannot handle my specific use case.

My use case is as follows. I have a set of lists that act like columns. On the first page, I would like to see the first two elements of the list of both columns.

<div>
  <ul class="column-1">
    <li>
    <li>
    <li>
    <li>
  </ul>
  <ul class="column-2">
    <li>
    <li>
    <li>
    <li>
  </ul>
</div>

, /, 1 - 4 1 - 2. nth-child, jquery li- ul. ( : http://pastebin.com/F7BqQaxh)

, jquery, , , . , , , - - .

. , -, ( .each(), "paged" ),// .

( ) Javascript, , . , JS . - : (. ## ##

Answer 1

pajinate , . div, , :

<script type="text/javascript">
$(function(){
  $(".pajinate").pajinate({
    item_container_id:'.pajinate-content', 
    nav_panel_id:'.navigation',
    items_per_page:3,
  });
});
</script>
<div>
  <div id="pajinate1" class="pajinate">
    <div class="navigation"></div>
    <ul class="column-1 pajinate-content">
      <li>a</li>
      <li>b</li>
      <li>c</li>
      <li>d</li>
      <li>e</li>
      <li>f</li>
      <li>g</li>
      <li>h</li>
      <li>i</li>
      <li>j</li>
      <li>k</li>
      <li>l</li>
    </ul>
  </div>
  <div id="pajinate2" class="pajinate">
    <div class="navigation"></div>
    <ul class="column-2 pajinate-content">
      <li>a</li>
      <li>b</li>
      <li>c</li>
      <li>d</li>
      <li>e</li>
      <li>f</li>
      <li>g</li>
      <li>h</li>
      <li>i</li>
      <li>j</li>
      <li>k</li>
      <li>l</li>
    </ul>
  </div>
</div>