цикличный слайдер

[imediasun1]

Помогите пожалуйста на чистом js написать слайдер, суть его в том что при нажатии влево картинка уходит влево и появляется следующая, и соответственно, вправо, при всем при этом когда заканчиваются фотографии должен происходить цикл, то есть опять первая фотография должна сменять последнюю, большое спасибо всем отозвавшимся

<div id="left_arrow"></div>
<div id="right_arrow"></div>
<div id="slider">
     <img class="child_img" src="">
     <img class="child_img" src="">
     <img class="child_img" src="">
</div>

http://learn.javascript.ru/play/AbKn5
Я понимаю что строю велосипед есть много примеров на jquery, но я хочу ради урока создать самому с нуля, подскажите что делать надо

[BETEPAH]

http://learn.javascript.ru/play/zfzaeb
извиняюсь за нецензурщину в ссылке, такой адрес выдали, я не виноват

[imediasun1]

Спасибо большое очень благодпрен
можете прокомментировать чтобы легче было разобраться в логике?

<script>
var picsNum = document.getElementById('slider').getElementsByTagName('img').length;
      var now = 0;
      var sliderOffset = [];
      for (var i = 0; i < picsNum; i++) sliderOffset.push(-i * 104 + 'px');
      console.table(sliderOffset);
      document.getElementById('left_arrow').onclick = function() {
        --now;
        if(now < 0) now = picsNum - 1;
        document.getElementById('slider').style.left = sliderOffset[now];
      }
      document.getElementById('right_arrow').onclick = function() {
        ++now;
        if(now > picsNum - 1) now = 0;
        document.getElementById('slider').style.left = sliderOffset[now];
      }


    </script>

[BETEPAH]

var picsNum = document.getElementById('slider').getElementsByTagName('img').length; // считаем сколько картинок заложено в слайдер
      var now = 0; // первой будет выведена картинка с индексом 0 (т.е. первая)
      var sliderOffset = []; 
      for (var i = 0; i < picsNum; i++) sliderOffset.push(-i * 104 + 'px'); // создаем массив с вариантами смещения слайдера для каждой картинки
      console.table(sliderOffset); // для отладки, это я забыл убрать. Выводит в консоль получившийся массив. Можете удалить строку
      document.getElementById('left_arrow').onclick = function() {
        --now;// уменьшаем индекс картинки
        if(now < 0) now = picsNum - 1; // если залезли в отрицательную область, делаем текущей последнюю картинку
        document.getElementById('slider').style.left = sliderOffset[now]; //смещаем слайдер в соответствии с текущей картинкой
      }
      document.getElementById('right_arrow').onclick = function() {
        ++now; // увеличиваем индекс картинки
        if(now > picsNum - 1) now = 0; // если индекс больше, чем может быть, делаем текущей первую картинку
        document.getElementById('slider').style.left = sliderOffset[now]; // см. выше
      }

[imediasun1]

В продолжении темы о слайдерах, очень пригодится ваша логика в построении того слайдера который нужен. Есть замечательный css слайдер картинок,Существует задача чтобы вместе с картинками менялся и текст соответствующий картинкам. Сложность существует в том что в данном слайдере невозможно почему то выделить селекторы кнопок вправо влево, смотрите самиhttp://learn.javascript.ru/play/hMpwob
Дайте пожалуйста направление как сделать меняющимся и текст

[BETEPAH]

невозможно почему то выделить селекторы кнопок вправо влево

Селекторы можно выделить всегда. Даже когда нет возможности правки верстки. Есть дочерние, соседские, родительские селекторы и т.д.
А в данном случае, если есть возможность поправить верстку, легко можно добавить нужным label id'шники и навешивать обработчики клика по ним.

[imediasun1]

например, я не понимаю как это сделать там же leblов динамическое количество, продемонстрируйте пожалуйста

[BETEPAH]

там же leblов динамическое количество

где вы увидели динамическое количество? Я вижу количество фиксированное - по количеству картинок:

<div class="side-controls">
        <label for="slide1"></label>
        <label for="slide2"></label>
        <label for="slide3"></label>
        <label for="slide4"></label>
        <label for="slide5"></label>
        <label for="slide6"></label>
     </div>

[imediasun1]

Извините не указал что собираюсь сделать слайдер динамическим, будет так

<div class="side-controls">
<?
foreach ($slider as $key=>$value){
?>
<label for="slide<?=$value['id']?>"></label>
<?
}
?>  
</div>

[BETEPAH]

<label for="slide<?=$value['id']?>"></label>

<label id="lab<?=$value['id']?>" for="slide<?=$value['id']?>"></label>

ммм?