自分のスライダーを作る

Question

私はスライダーを作っていて、いくつか問題があります。

1）最初のスライドでアニメーションはアニメーション化されません。

2）最後のボックスの間隔は開始時にはオフですが、スライダが進むにつれて修正されます。

3）時々、アニメーションに何らかの吃音があります。

私はここcodepenでこれを入れている：

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

何かアドバイスがはるかに高く評価されます。なぜこれらの問題が発生しているのか不明です。私はcss/dom/calcsを変更するアニメーションとjavascript/jqueryのCSSトランジションを使用しています。

CODE

<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の親をfont-size：0にすることです。

2番目の問題は、最初のスライドがアニメーション化されていなかったことです。これは、最初のCSS左端の値がアニメーション化されていないためです。