默認縮放級別下，Google Chrome中的幻燈片無法使用？

Question

我試圖做一個JQuery幻燈片，每隔幾秒鐘旋轉一組圖像，並在完成時將roundrobins旋轉回最初的一個。我使用CSS翻譯，它應該在2010年在Chrome中工作，但它似乎不適用於我。在Firefox和IE中，它可以工作，但不是Chrome。有趣的是，當我縮小或放大時，只需以任何方式更改縮放級別，然後開始工作，而不是頁面加載。爲什麼是這樣？

$(document).ready(function() { 
 
    var i = 0; 
 
    setInterval(slide, 1500); 
 
    function slide() { 
 
     $("#slider").css("transform", "translateX(" + $(this).index() * +(i * 1000) + "px)"); 
 
     if (i == 2) { 
 
      i = 0; 
 
     } else { 
 
      i++; 
 
     } 
 
    } 
 
});

#slider_container { 
 
    width: 1000px; 
 
    height: 300px; 
 
    margin-bottom: 0.5em; 
 
    overflow: hidden; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
#slider { 
 
    width: 3000px; 
 
    -webkit-transition: all 1.0s ease-in-out; 
 
    -moz-transition: all 1.0s ease-in-out; 
 
    -o-transition: all 1.0s ease-in-out; 
 
    transition: all 1.0s ease-in-out; 
 
} 
 
#slider img { 
 
    padding: 0; 
 
    margin: 0; 
 
    float: left; 
 
} 
 
.bannered { 
 
    max-width: 1000px; 
 
    max-height: 300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="slider_container"> 
 
    <div id="slider"> 
 
     <img src="http://i.imgur.com/6C1jhl0.png" class="bannered" alt="" /> 
 
     <img src="http://i.imgur.com/nTmz9LF.png" class="bannered" alt="" /> 
 
     <img src="http://i.imgur.com/qFZIvPr.png" class="bannered" alt="" /> 
 
    </div> 
 
</div>

Answer 1

嘗試增加position: relative;您#slider img。