<ul id="slides">
  <li class="slide">
    <img src="url_from_input" />
  </li>
  <li class="slide">
    <img src="url_from_input" />
  </li>
</ul>

<div id="slider"></div>

<script>
var imgUrl =  ['https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg'];

function makeUL(array) {
  // Create the list element:
   list = document.createElement('ul');
  list.id = "slides";

  for(var i = 0; i < array.length; i++) {
      // Create the list item:
      var li = document.createElement('li');
      li.className = "slide";
      var img = document.createElement('img');

      // Set its contents:
      img.src = array[i];
      li.appendChild(img);
      //li.appendChild(document.createTextNode(array[i]));

      // Add it to the list:
      list.appendChild(li);
  }

  // Finally, return the constructed list:
    return list;
}
// Add the contents of imgUrl to #slides:
document.getElementById('slider').appendChild(makeUL(imgUrl));


function addImg(){
  var input = document.getElementById("input");
  if (input.value != ""){
    imgUrl.push(document.getElementById("input").value);
    return list;
  }
}
//test obsahu array
var arrayLength = imgUrl.length;
for (var i = 0; i < arrayLength; i++) {
    document.getElementById(demo).innerHTML = myStringArray[i];
    //Do something
}
</script>
<form>
 <input id="input" type="text">
  <input type=button onclick="addImg()" value="Add image url to slider"/>
 </form>