Создание собственного слайдера

Question

Я делаю слайдер, и у меня есть несколько вопросов.

1) На первом слайде анимация не оживляет.

2) Интервал для последнего окна выключен в начале, но по мере того, как ползунок прогрессирует, он исправляется.

3) Иногда анимация имеет некоторое заикание.

Я поставил это в codepen здесь:

http://codepen.io/mpaccione/pen/MyJNxM

Любой совет высоко ценится. Я не уверен, почему возникают эти проблемы. Я использую css-переходы для анимации и javascript/jquery для изменения css/dom/calcs.

КОД

<style type="text/css"> 
    html,body { 
     margin: 0; 
     background-color: #888; 
     height: 100%; 
     width: 100%; 
     box-sizing: border-box; 
    } 

    #slider { 
     width: 100%; 
     height: 100%; 
     display: block; 
     position: relative; 
     transition-duration: 0.5s; 
     transition-timing-function: ease-in-out; 
    } 

    #slider ul { 
     padding: 0; 
     margin: auto; 
     display: block; 
     top: 50%; 
     position: relative; 
     transform: translateY(-50%); 
     white-space: nowrap; 
    } 

    #slider li { 
     display: inline-block; 
     height: 150px; 
     width: 150px; 
     margin: 10px; 
    } 

    .sliderContainer { 
     width: 60%; 
     height: 200px; 
     overflow: hidden; 
     background-color: white; 
     top: 50%; 
     left: 50%; 
     transform: translateX(-50%) translateY(-50%); 
     position: relative; 
    } 

</style> 

    <div class="sliderContainer"> 
     <div id="slider"> 
      <ul> 
       <li style="background-color: red">a</li> 
       <li style="background-color: green">b</li> 
       <li style="background-color: blue">c</li> 
       <li style="background-color: orange">d</li> 
       <li style="background-color: purple">e</li> 
       <li style="background-color: yellow">f</li> 
      </ul> 
     </div> 
    </div> 

<script type="text/javascript"> 

$(document).on("ready", function(){ 

    var slider = $("#slider"), 
     sliderWidth = slider.outerWidth(true), 
     img = slider.find("li"), 
     imgWidth = img.outerWidth(true), 
     imgCount = img.length, 
     imgSize = sliderWidth/imgCount, 
     imgHorMargin = parseFloat(img.css("margin-left")) + parseFloat(img.css("margin-right")), 
     imgVerMargin = parseFloat(img.css("margin-bottom")) + parseFloat(img.css("margin-top")), 
     imgSizeX = (imgSize-imgHorMargin), 
     imgSizeY = (imgSize-imgVerMargin); 

    slider.find("li").css({"width": imgSizeX, "height": imgSizeY}); 


    (function slideActivate(){ 
     setTimeout(function loop(){ 
      slider.css("transition-duration", "0.5s"); 
      slider.css("left",-imgSize); 
      setTimeout(function(){ 
       console.log("timeout2"); 
       firstImage = slider.find("li")[0]; 
       firstImage.remove(); 
       slider.css("transition-duration", "0s"); 
       slider.css("left", "0px"); 
       setTimeout(function(){ 
        console.log("timeout3"); 
        slider.find("ul").append(firstImage); 
        requestAnimationFrame(slideActivate); 
       }, 100); 
      }, 500); 
     }, 2000); 
    })(); 

}); 

</script> 

Answer 1

Оказывается, что вопрос маржа была сделать в браузере рендеринга пространство как элементы были рядный блок. Браузеры добавляют неизменяемый интервал.

Лучшее решение, которое я нашел, состоит в том, чтобы заставить родителя ul иметь размер шрифта: 0.

Вторая проблема была первым слайдом, не оживляющим, потому что у меня не было начального значения css, установленного для анимации.