Nie mogę rozwiązać tego problemu, czy jesteś w stanie go rozwiązać? Potrzebuję porady eksperta, jak to zrobić w JS vanilla lub jQuery (opcjonalnie). Próbka kodu na jsfiddle byłaby wysoko ceniona.

Muszę wyświetlić tablicę 5 elementów na liście z limitem 3 na raz

var range = [0,1,2,3,4];

<ul>
  <li>0</li>
  <li>1</li>
  <li>2</li>
</ul>

<div id="prev">prev</div>
<div id="next">next</div>

Gdy użytkownik kliknie „next”, muszę dodać klasę „focus” do pierwszego „li”.

<ul>
  <li class="focus">0</li>
  <li>1</li>
  <li>2</li>
</ul>

Drugie kliknięcie „next”

<ul>
  <li>0</li>
  <li class="focus">1</li>
  <li>2</li>
</ul>

kliknij „next” ...

<ul>
  <li>0</li>
  <li>1</li>
  <li class="focus">2</li>
</ul>

kliknij „next” ... note shift przesunięcie tablicy

<ul>
  <li>1</li>
  <li>2</li>
  <li class="focus">3</li>
</ul>

kliknij „next” ... przesunięcie tablicy

<ul>
  <li>2</li>
  <li>3</li>
  <li class="focus">4</li>
</ul>

kliknij „next” ... ale nie mogę przejść dalej, ponieważ w tablicy nie ma elementu do wyświetlenia, więc jeśli kliknę „prev”, chciałbym mieć odwrotną stronę

kliknij „poprzednio”…

<ul>
  <li>2</li>
  <li class="focus">3</li>
  <li>4</li>
</ul>

kliknij „poprzednio”…

<ul>
  <li class="focus">2</li>
  <li>3</li>
  <li>4</li>
</ul>

kliknij „prev”… zanotuj przesunięcie tablicy

<ul>
  <li class="focus">1</li>
  <li>2</li>
  <li>3</li>
</ul>

kliknij „prev”… zanotuj przesunięcie tablicy

<ul>
  <li class="focus">0</li>
  <li>1</li>
  <li>2</li>
</ul>

kliknij „prev”… nic się nie dzieje, abyśmy dotarli do początku idź do tablicy

<ul>
  <li class="focus">0</li>
  <li>1</li>
  <li>2</li>
</ul>

Dowolny pomysł? Z góry dziękuję

Poprawione rozwiązania sugerowane w odpowiedziach

http://jsfiddle.net/QwATR/