I'm so close!!! The only problem I have now is when clicking the left-arrow, it should slide in the opposite direction.

Also, I would prefer that when there are no more pages to scroll through, the slide doesn't cycle.

  $('#ajax').asfar({
        selector : '.r-arrow, .l-arrow',
      before : function(urlFragment,target){
          console.log('before');
      },
      insert : function(urlFragment,target,data){
          $(target).hide("slide", { direction: "left" }, 500, function(){
              $(target).html(data);
              $(target).show("slide", { direction: "right" }, 500);
          });
      },
      after : function(urlFragment,target){
          console.log('after');
      },
      success : function(urlFragment,target){
          if(0 > $('a[href="' + urlFragment + '"]').length){
              $('a').removeClass('active');
              $('a[href="' + urlFragment + '"]').addClass('active');
          }
          _gaq.push(['_trackPageview',urlFragment]);
      }
  });

@Mottie Thanks for taking a look at this. If you noticed, I ended up having to create two pieces of code to get the slide direction functionality to work. Surprisingly IE doesn't even render the slide effect so the pagination works (thankfully!).

I'm not really following you on location.href.split(':')[2] or where to place it.

I tried putting the pagination inside the #ajax div and Ajax fails sometimes. I'm still waiting to hear back from the author of the plugin to see if he has any solutions.

I think I understand now.

I think you might need to target the section.content instead of #ajax because the content includes the pagination and if you get that, you can determine if there are more pages from l-arrow and r-arrow (which don't seem to be updating on the main page). So try something like this:

  var ajax = $('#ajax'),
          result, link;
  $('section.content').asfar({
      selector : '.r-arrow, .l-arrow',
      insert : function(urlFragment,target,data){
         ajax.hide("slide", { direction: "left" }, 500, function(){
              result = $(data);
              $(target).html(data);
              ajax.show("slide", { direction: "right" }, 500);
              // update navigation arrows
              link = result.find('.l-arrow').attr('href') || '';
              $('.l-arrow').attr('href', link).toggleClass('active', link !== '');
              link =  result.find('.l-arrow').attr('href) || '';
              $('.r-arrow').attr('href', link).toggleClass('active', link !== '');
          });
      },
      success : function(urlFragment,target){
          _gaq.push(['_trackPageview',urlFragment]);
      }
  });

I haven't tested it, but hopefully it will help.

I wrote that to only update the #ajax section, but moving the nav inside would work too. If you move the nav, you might not need to worry about all the extra code to stop the slider from changing pages.

I tried the solution and the entire content collapses. It also does not update the URL of the paginated arrows.

@Mottie If I turn off the show/hide slider, the pagination doesn't work.

I updated everything so that pagination is inside of #ajax. You can even see the number in the URL if you hover over the arrows. You might have to click through a few times to get it to fail.

I really appreciate it @Mottie!

Whew, ok, I think I finally got it.

You'll need to modify your HTML to match this:

  <div id="ajaxwrapper">
    <div id="ajax">

      <article class="article">...</article>
      <article class="article">...</article>
      <article class="article">...</article>

    </div>
    <nav class="pagination"> <!-- assuming we're on page:2 -->
      <a class="r-arrow" href="http://chrisburton.me/dev/page:1"></a>
      <a class="l-arrow" href="http://chrisburton.me/dev/page:3"></a>
    </nav>

  </div>

Then use this code (in function.js):

var $larrow = $('.l-arrow'),
  $rarrow = $('.r-arrow'),
  $wrap = $('#ajaxwrapper'),
  $ajax = $('#ajax'),
  regx  = /page\:\d+/,

  disableNav = function(){
    $larrow.add($rarrow).each(function(){
      var t, link = (location.href.match(regx) || '')[0];
      $(this)
        .attr('href', function(i, curLink){
          t = (curLink.match(regx) || '')[0] === link;
          return t ? '' : curLink;
        })
        .toggle(!t);
    });
  },

  updateStuff = function(data, dir){
    var d = $( $.parseHTML(data) );
    // update navigation arrows
    $larrow.attr('href',  d.find('.l-arrow').attr('href') || '');
    $rarrow.attr('href',  d.find('.r-arrow').attr('href') || '');
    // slide stuff around
    $ajax.hide("slide", { direction: dir ? "right" : "left" }, 500, function(){
      $ajax.html( d.filter('#ajax').html() );
      $ajax.show("slide", { direction: dir ? "left" : "right" }, 500);
    });

  };

// check arrows at page load
disableNav();

$wrap.asfar({
  selector : '.l-arrow',
  insert : function(urlFragment,target,data){
    updateStuff(data, true);
  },
  success : function(urlFragment,target){
    disableNav();
    // _gaq.push(['_trackPageview',urlFragment]);
  }
});


$wrap.asfar({
  selector : '.r-arrow',
  insert : function(urlFragment,target,data){
    updateStuff(data, false);
  },
  success : function(urlFragment,target){
    disableNav();
    // _gaq.push(['_trackPageview',urlFragment]);
  }
});

@Mottie So I tried your code and this is the result (pay attention to the tab title).

http://f.cl.ly/items/2L23442L0P030q3X3M3F/ajax.mp4

@Mottie Yeah, I'm not sure what's going on. It also does the same thing in your example if you keep clicking around. This plugin wasn't really meant for the type of site I have so I either have to build my own (with no knowledge of jQuery) or pretty much not have that functionality.

@Mottie I've reached out to other Kirby users to see if changing the pagination from /page:2 to /#page:2 or even /!#/page:2 is possible. Still waiting to hear back.

What I find odd is that I don't recall this happening when I used the default installation with a simple jQuery fade.

I'm also curious if creating my own Ajax solution would be beneficial rather than using someone else's.

Thanks @Mottie. I'll definitely try that tutorial out and let you know how it goes. Very appreciative for the help you've given.