当浏览器尺寸较小时，移动幻灯片显示无法正确显示

Question

我的移动幻灯片显示在我的网页加载后立即显示。

当浏览器窗口是完整大小时，一切都很好但是当我重新调整浏览器窗口大小时，图像进入需要一段时间。

当缩小尺寸时，我正在使用Bootstrap媒体查询来重新调整幻灯片中的图像大小。

我认为它可能与关键帧有关：

@keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
 margin-left: -2125px;
}

或者也许是bootstrap CSS？

@media(max-width: 768px){

header #container
{
    width: 100%;
    height: 150px;
    margin-top: 10px;
    background-size: cover;

}

header .photobanner img {
margin-top: 30px;
width: 150px;
height: 90px;
}

}

@media(max-width: 868px){

header #container
{
    width: 100%;
    height: 150px;
    margin-top: 10px;
    background-size: contain;

}

header .photobanner img {
margin-top: 30px;
width: 150px;
height: 90px;
    }


    }

js fiddle：https://jsfiddle.net/qwg4vg4w/