Менять изображения слайдером по условию

Есть простенький слайдер ,в нем 3 изображения на svg где ID один ,а вот изображения как-то должны меняться по условию и меняться здесь .data="images/pr1_mobile.svg". и почему-то не работает кнопка "назад", кнопка "вперед" работает. Как это реализовать или может есть другой пример ? Но главное чтоб по условию менялись в этом файле с ID"pr1-svg" сами изображения .data="изображение 1"

<div id="slider">
  <object id="pr1-svg"   type="image/svg+xml"  width="100%" height="100%"  ></object>
    </div>
</div>
<div class="arrows">
  <button id="prev">prev</button>
  <button id="next">next</button>
</div>

<script>
var left = 0;
document.getElementById("next").onclick = sliderLeft;
function sliderLeft() {
  var polosa = document.getElementById("polosa");
  var max_lenght = document.querySelectorAll("pr1-svg").data="images/pr1.svg;
  left = left - 100;
  if (left <= (max_lenght.length*-100)) {
    left = 0;
  }

   if (left <= -400) {
    left = 0;
  }

  polosa.style.left = left + "%";
}
</script>

пробовал второй вариант ,он вроде должен был быть рабочий но что-то не то(

<div id="panel"  style="display:block;"  >
     <object id="fl-svg"  data="images/osbb_1CO.svg" type="image/svg+xml"  width="100%" height="100%" onClick="imgsrc();" ></object>
</div>
<script language="javascript">
        var i=0;
        var image=document.getElementById("fl-svg");
        // Добавте свои картинки через запятую
        var imgs=new Array('images/osbb_1CO.svg','images/osbb_2CO.svg');
        function imgsrc() {
            i++;
            image.data=imgs[i];
        }
    </script>