[英]My css slider doesn't work
Why my CSS slider doesn't work?为什么我的 CSS 滑块不起作用?
I am trying to make CSS content slider but I am stuck.我正在尝试制作 CSS 内容滑块,但我被卡住了。 I cant find the reason why it doesn't move pass the first picture.
我找不到它不通过第一张图片的原因。 Is there something wrong with the animation maybe.
可能是动画有问题。
by the way I use chrome.顺便说一下,我使用 chrome。
The CSS for slider code is as below :滑块代码的 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%;
}
}
And the HTML part is :而 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.