我的css滑块不起作用

问题描述：

我想让CSS内容滑块，但我卡住了。我无法找到它不移动第一张照片的原因。也许动画有什么问题。

顺便说一句，我使用铬。

的滑块代码的CSS是如下：

.slider { 
overflow: hidden; 
height: 250px; 
} 

.slider figure div { 
    width: 20%; 
    float: left; 
} 

.slider figure img { 
    width: 100%; 
    float: left; 
} 

.slider figure { 
    position: relative; 
    width: 500%; 
    left: 0px; 
    margin: 0; 
    animation: 20s slideri infinite; 
} 

@keyframes slideri { 
0% { 
    left; 
    0%; 
} 

10% { 
    left; 
    0%; 
} 

12% { 
    left; 
    -100%; 
} 

22% { 
    left; 
    -100%; 
} 

24% { 
    left; 
    -200%; 
} 

34% { 
    left; 
    -200%; 
} 

36% { 
    left; 
    -300%; 
} 

46% { 
    left; 
    -300%; 
} 

48% { 
    left; 
    -400%; 
} 

58% { 
    left; 
    -400%; 
} 

60% { 
    left; 
    -300%; 
} 

70% { 
    left; 
    -300%; 
} 

72% { 
    left; 
    -200%; 
} 

82% { 
    left; 
    -200%; 
} 

84% { 
    left; 
    -100%; 
} 

94% { 
    left; 
    -100%; 
} 

96% { 
    left; 
    0%; 
} 
}

和HTML的部分是：

<div> 
     <div class="slider"> 
      <figure> 
       <div class="slide"> 
        <img src="kuva_1.jpg"> 
       </div> 
       <div class="slide"> 
        <img src="kuva_2.jpg"> 
       </div> 
       <div class="slide"> 
        <img src="kuva_3.jpg"> 
       </div> 
       <div class="slide"> 
        <img src="kuva_4.jpg"> 
       </div> 
       <div class="slide"> 
        <img src="kuva-5.jpg"> 
       </div> 
      </figure> 
     </div> 
    </div>

答

您为关键帧使用;代替:。

@keyframes slideri { 
    0%{left; 0%;} 
    /* ... */ 
}

应该成为

@keyframes slideri { 
    0%{left: 0%;} 
    /* ... */ 
}

您对JSFiddle例子。

我的css滑块不起作用

相关推荐