php - best approach for jQuery slider with dynamic prev/next content?

Question

Here's a somewhat complex puzzle, I'd love some feedback on how others would approach this.

This site is basically a free regional news blog. The image at the bottom demonstrates the layout (ignore the date overlap glitch). It's coded in PHP, jQuery and xajax.

My question has to do with dynamic content loading. As is, on page-load, I assign the arrows to the URL of the prev/next articles. No prob. The URLs are friendly, the page reloads to the next article, and I can cycle through them all day long.

But ... I'd like to turn the arrows into a slider (not an href) with the following behavior:

Clicking the right arrow will ...

1. Begin loading the new content offscreen via xajax,
2. Cause the old content to slide left (from onscreen to offscreen) flush with the new content also sliding left (from offscreen to onscreen).

Why? Sliders are awesome, and I think it would look pro. And this is basic slider stuff (like this jQuery scrollLeft slider) except with content being dynamically loaded on click of the arrow, which raises some questions:

• What's the best approach for this?
• Do I use PHP to pre-populate ALL empty hidden article DIVs?
• Do I use jQuery to append/prepend/remove article DIVs with each arrow click?
• What would the jQuery "scrollLeft" offset look like? The content DIV is static width, but would I be better off with jQuery scrollTo?

I hope my question is clear ... Any suggestions would be most appreciated!

Answer 1

Here's the solution I came up with.

http://jsfiddle.net/tXUwZ/

If anyone has ideas on how to clean it up or make it tighter, please let me know!

Many thanks to @Jamie for the push in the right direction!