0
J'ai du mal à obtenir mon ul pour montrer plus d'une image. J'ai essayé de fouiller avec différentes choses, comme utiliser des classes et des ids au lieu de ul: nth-child(). Je ne peux pas pour la vie de moi comprendre ce que j'ai fait pour le faire se comporter comme ça. Est-ce que le problème est dans mon CSS ou dans mon HTML?ul d'images ne montre que le premier enfant
.container {
width: 100%;
height: 200px;
background: #505050;
position: fixed;
margin: 0;
padding: 0;
bottom: 0px;
left: 0;
}
.container ul {
position: relative;
margin: 0;
padding: 0;
}
.container li {
width: 300px;
height: 200px;
position: absolute;
list-style: none;
}
.container ul:nth-child(1) {
animation: cycleOne 10s linear infinite;
}
.container ul:nth-child(2) {
animation: cycleTwo 10s linear infinite;
}
.container ul:nth-child(3) {
animation: cycleThree 10s linear infinite;
}
.container ul:nth-child(4) {
animation: cycleFour 10s linear infinite;
}
.container ul:nth-child(5) {
animation: cycleFive 10s linear infinite;
}
.container ul:nth-child(6) {
animation: cycleSix 10s linear infinite;
}
.container ul:nth-child(7) {
animation: cycleSeven 10s linear infinite;
}
@keyframes cycleOne {
0% {
left: 500px;
}
100% {
left: -300px;
}
}
@keyframes cycleTwo {
0% {
left: 1800px;
}
100% {
left: -300px;
}
}
@keyframes cycleThree {
0% {
left: 1500px;
}
100% {
left: -300px;
}
}
@keyframes cycleFour {
0% {
left: 1200px;
}
100% {
left: -300px;
}
}
@keyframes cycleFive {
0% {
left: 900px;
}
100% {
left: -300px;
}
}
@keyframes cycleSix {
0% {
left: 600px;
}
100% {
left: -300px;
}
}
@keyframes cycleSeven {
0% {
left: 300px;
}
100% {
left: -300px;
}
}<div class="container">
<ul>
<li>
<a href="1.html">
<img height="200px" width="300px" src="images/kitty.jpg">
</a>
</li>
<li>
<a href="2.html">
<img height="200px" width="300px" src="images/kitty.jpg">
</a>
</li>
<li>
<a href="3.html">
<img height="200px" width="300px" src="images/kitty.jpg">
</a>
</li>
<li>
<a href="4.html">
<img height="200px" width="300px" src="images/kitty.jpg">
</a>
</li>
<li>
<a href="5.html">
<img height="200px" width="300px" src="images/kitty.jpg">
</a>
</li>
<li>
<a href="6.html">
<img height="200px" width="300px" src="images/kitty.jpg">
</a>
</li>
<li>
<a href="7.html">
<img height="200px" width="300px" src="images/kitty.jpg">
</a>
</li>
</ul>
</div>