Я не могу решить эту проблему, вы в состоянии ее решить? Мне нужен ваш экспертный совет о том, как сделать это в JS vanilla или jQuery (необязательно). Пример кода на jsfiddle будет высоко ценится.

Я должен отобразить массив из 5 элементов в списке с ограничением 3 одновременно

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>

Когда пользователь нажимает «Далее», мне нужно добавить класс «Фокус» на первый «Ли».

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

Второй клик на «далее»

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

нажмите «далее» ...

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

нажмите на «следующий» ... смещение массива примечаний

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

нажмите на «следующий» ... смещение массива

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

нажмите «Далее» ... но я не могу идти дальше, так как в массиве нет элемента, который будет отображаться, поэтому, если я нажимаю «предыдущий», я хотел бы иметь обратное

нажмите на «предыдущий» ...

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

нажмите на «предыдущий» ...

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

нажмите на «предыдущий»… смещение массива примечаний

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

нажмите на «предыдущий»… смещение массива примечаний

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

нажмите на «предыдущий» ... ничего не произошло, мы достигли начала идти массив

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

Любая идея? заранее спасибо

Пересмотренные решения как предложено в ответах

http://jsfiddle.net/QwATR/