лучший подход для слайдера JQuery с динамическим предыдущим / следующим контентом?

Question

Вот несколько сложная головоломка, я хотел бы получить отзывы о том, как другие к этому подойдут.

Этот сайт в основном бесплатный региональный новостной блог.Изображение внизу демонстрирует макет (не обращайте внимания на проблему с перекрытием даты).Он написан на PHP, jQuery и xajax.

Мой вопрос связан с динамической загрузкой контента.Как и при загрузке страницы, я назначаю стрелки на URL предыдущих / следующих статей.Нет проблем.URL-адреса удобны, страница перезагружается до следующей статьи, и я могу просматривать их весь день.

Но ... Я бы хотел превратить стрелки в слайдер (не href) со следующим поведением:

Нажатие стрелки вправо приведет к ...

1. Начать загрузку нового контента вне экрана через xajax,
2. Причинитьстарый контент перемещается влево (с экрана на экран), а новый контент также сдвигается влево (с экрана на экран).

Почему?Слайдеры потрясающие, и я думаю, что это будет выглядеть профессионально.И это основной материал слайдера (например, этот слайдер jQuery scrollLeft ), за исключением случаев, когда содержимое динамически загружается по нажатию стрелки, что вызывает некоторые вопросы:

• Каков наилучший подход для этого?
• Использую ли я PHP для предварительного заполнения ВСЕХ пустых скрытых статей DIV?
• Использовать ли jQuery для добавления / добавления / удаления DIV статьи при каждом щелчке стрелки?
• Как будет выглядеть смещение scrollLeft в jQuery?DIV контента имеет статическую ширину, но мне лучше с jQuery scrollTo ?

Надеюсь, мой вопрос ясен ... Любые предложениябыть наиболее ценным!

Answer 1

Вот решение, которое я придумала.

http://jsfiddle.net/tXUwZ/

Если у кого-то есть идеи, как его почистить или сделать его более плотным, сообщите мне!

Большое спасибо @Jamie за толчок в правильном направлении!

Answer 2

На мой взгляд, у вас есть два варианта:

1. Заполнить каждый слайдер при загрузке страницы, чтобы функция щелчка jQuery анимировала содержимое
2. Заполнение данных для каждого слайда с использованиемвызов AJAX

Если это всего лишь несколько элементов / слайдов, то я бы заполнил при загрузке страницы.Если вы просматриваете много слайдов (что можно ожидать в ежедневном новостном блоге) или если каждый слайд будет содержать много данных (например, изображения в высоком разрешении и т. Д.), Я бы выбрал второй вариант.

Второй вариант легко сделать.Все, что вам нужно, - это три деления (один для экранного слайда и два для боковых закадровых слайдов, которые «заменят» экранный слайд при нажатии любой стрелки).Я бы использовал что-то вроде этого:

<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>

И требуемый CSS:

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

А что касается 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
});

Но это только один вариант,Вы можете использовать ползунок из коробки, но я предпочитаю настраивать код, чтобы я точно знал, что я делаю.