js отображение элемента слайдера

/* этот код помечает картинки, для удобства разработки */ 
var carusel = document.getElementById('carusel'); 
var lis = carusel.getElementsByTagName('li'); 
for (var i = 0; i < lis.length; i++) { 
  lis[i].style.position = 'relative'; 
  var span = document.createElement('span'); 
  // обычно лучше использовать CSS-классы, 
  // но этот код - для удобства разработки, так что не будем трогать стили 
  span.style.cssText = 'position:absolute;left:0;top:0;color:'; 
  span.innerHTML = i + 1; 
  lis[i].appendChild(span); 
} 
 
/* конфигурация */ 
var width = 112; // ширина изображения 
var count = 1; // количество изображений 
 
 
var list = carusel.querySelector('ul'); 
var listElems = carusel.querySelectorAll('li'); 
 
var position = 0; // текущий сдвиг влево 
 
carusel.querySelector('.prev').onclick = function() { 
  // сдвиг влево 
  // последнее передвижение влево может быть не на 3, а на 2 или 1 элемент 
  position = Math.min(position + width * count, 0) 
  list.style.marginLeft = position + 'px'; 
}; 
 
carusel.querySelector('.next').onclick = function() { 
  // сдвиг вправо 
  // последнее передвижение вправо может быть не на 3, а на 2 или 1 элемент 
  position = Math.max(position - width * count, -width * (listElems.length - count)); 
  list.style.marginLeft = position + 'px'; 
};

.geogr__carusel { 
    position: relative; 
    width: 700px; 
    padding: 10px 40px; 
    margin: 0 auto; } 
    .geogr__carusel .arrow { 
      position: absolute; 
      top: 60px; 
      padding: 0; 
      background: #ddd; 
      border-radius: 15px; 
      border: 1px solid gray; 
      font-size: 24px; 
      line-height: 24px; 
      color: #444; 
      display: block; 
      border: none; } 
    .geogr__carusel .prev { 
      background: url("../img/geogr/prev.png") no-repeat; 
      width: 33px; 
      height: 33px; 
      left: 7px; } 
    .geogr__carusel .next { 
      background: url("../img/geogr/next.png") no-repeat; 
      width: 33px; 
      height: 33px; 
      right: -88px; } 
    .geogr__carusel .arrow:focus { 
      outline: none; } 
    .geogr__carusel .arrow:hover { 
      cursor: pointer; } 
  .geogr__galery { 
    width: 785px; 
    overflow: hidden; } 
  .geogr__ul { 
    height: 130px; 
    width: 9999px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    transition: margin-left 250ms; 
    font-size: 0; } 
    .geogr__ul li { 
      float: left; } 
      .geogr__ul li img { 
        height: 112px; 
        display: block; }

 <div class="geogr__carusel carusel" id="carusel"> 
            <button class="arrow prev"></button> 
            <div class="geogr__galery"> 
                <ul class="geogr__ul"> 
                    <li> 
                        <img src="../img/geogr/slider-rus.png" alt="russ flag" /> 
                    </li> 
                    <li> 
                        <img src="../img/geogr/slider-ukr.png" alt="russ flag" /> 
                    </li> 
                    <li> 
                        <img src="../img/geogr/slider-blr.png" alt="russ flag" /> 
                    </li> 
                    <li> 
                        <img src="../img/geogr/slider-rus.png" alt="russ flag" /> 
                    </li> 
                    <li> 
                        <img src="../img/geogr/slider-ukr.png" alt="russ flag" /> 
                    </li> 
                    <li> 
                        <img src="../img/geogr/slider-blr.png" alt="russ flag" /> 
                    </li> 
                    <li> 
                        <img src="../img/geogr/slider-rus.png" alt="russ flag" /> 
                    </li> 
                    <li> 
                        <img src="../img/geogr/slider-rus.png" alt="russ flag" /> 
                    </li> 
                    <li> 
                        <img src="../img/geogr/slider-rus.png" alt="russ flag" /> 
                    </li> 
                    <li> 
                        <img src="../img/geogr/slider-blr.png" alt="russ flag" /> 
                    </li> 
 
                </ul> 
            </div> 
            <button class="arrow next"></button> 
        </div> 
    </div>