beste Ansatz für jQuery-slider mit dynamischen prev/next Inhalt?

Haben Sie zwei Möglichkeiten meiner Meinung nach:

1. Füllen Sie die einzelnen Schieberegler auf der Seite geladen, so dass ein jQuery-click-Funktion animiert den Inhalt
2. Auffüllen der Daten auf einer pro Seite Grundlage mit einem AJAX-call

Wenn es nur ein paar items/Folien, dann würde ich Auffüllen auf die Seite laden. Wenn Sie auf den vielen rutschen (was Sie vielleicht erwarten, mit einem täglichen news-blog), oder ob jeder Folie enthalten eine Menge von Daten (beispielsweise high-res-Bilder, etc.) Ich würde die zweite option.

Die zweite option ist einfach zu tun. Alles, was Sie brauchen, ist drei divs (eins für den Bildschirm schieben und zwei für die flankierenden offscreen-Folien, das 'ersetzen' der Bildschirm ein, wenn entweder der Pfeil geklickt wird). Ich würde so etwas wie dieses:

<div class="container">
    <div class="inner-container">
       <div class="back"></div>
        <div class="content off_screen_left" id="1"></div>
        <div class="content on_screen" id="2"></div>
        <div class="content off_screen_right" id="3"></div>
       <div class="next"></div>
    </div>
</div>

Und die benötigten CSS:

.container{width:200px;height:150px;overflow:hidden}
.inner-container{width:600px;height:150px;margin-left:-200px}
.content{float:left;width:200px;height:150px}

Und wie für jQuery:

$(".next").live('click', function(){
  var current_id=$(this).prev(".on_screen").attr("id"); //get current page ID
  $(".content").css("float","right"); //float all elements to the right
  $(".off_screen_right").animate({display:none;}); //make the furthest right disappear gradually
  $(".on_screen").attr("class","off_screen_right"); //make on_screen the new off_screen_right and add the correct ID attribute
  $(".off_screen_left").attr("class","content on_screen"); //make off_screen_left the new on_screen
  $(".container").prepend('<div class="content off_screen_left" id="'+current_id-1+'"></div>'); //add the new off_screen_left element and add the correct ID attribute
  $(".off_screen_left").load("load-content.php?page_id="+current_id-1);  //populate the new off_screen_left element
});
$(".back").live('click', function(){
  var current_id=$(this).next(".on_screen").attr("id"); //get current page ID
  $(".content").css("float","left"); //float all elements to the left
  $(".off_screen_left").animate({display:none;}); //make the furthest left disappear gradually
  $(".on_screen").attr("class","off_screen_left"); //make on_screen the new off_screen_left and add the correct ID attribute
  $(".off_screen_right").attr("class","content on_screen"); //make off_screen_right the new on_screen
  $(".container").append('<div class="content off_screen_right" id="'+current_id+1+'"></div>'); //add the new off_screen_left element and add the correct ID attribute
  $(".off_screen_right").load("load-content.php?page_id="+current_id+1);  //populate the new off_screen_left element
});

Aber das ist nur eine option. Sie können einen Schieberegler verwenden, out of the box, aber ich bevorzuge, um benutzerdefinierte code-Dinge, so dass ich genau weiß, was ich Tue.