我正在制作一个网站的轮播，但宽度有问题。我希望每个图像都占据视口的整个宽度，但最后一个图像出现在第一个图像的下方。即使滑块动画也无法通过在右侧滑动额外内容来正确滑动图像。任何帮助，将不胜感激
/*carousel container*/
.carousel {
overflow: hidden;
}
/*figure tag containing carousel*/
.carousel figure {
position: relative;
width: 600vw;
animation: 25s slider infinite;
}
/*carousel images*/
.carousel figure img {
width: 100vw;
}
/*animations for carousel*/
@keyframes slider {
0% {
left: 0vw;
}
14% {
left: 0vw;
}
15% {
left: -100vw;
}
29% {
left: -100vw;
}
30% {
left: -200vw;
}
44% {
left: -200vw;
}
45% {
left: -300vw;
}
59% {
left: -300vw;
}
60% {
left: -400vw;
}
74% {
left: -400vw;
}
75% {
left: -500vw;
}
90% {
left: -500vw;
}
100% {
left: 0vw;
}
}
<div class="carousel">
<figure>
<img src="https://rukminim1.flixcart.com/flap/1688/280/image/a341a61df77a5715.jpg?q=50">
<img src="https://rukminim1.flixcart.com/flap/1688/280/image/971922653b729a9e.jpg?q=50">
<img src="https://rukminim1.flixcart.com/flap/1688/280/image/4075d3bac7ced1e9.jpg?q=50">
<img src="https://rukminim1.flixcart.com/flap/1688/280/image/411e38f49c1486b4.jpg?q=50">
<img src="https://rukminim1.flixcart.com/flap/1688/280/image/8c30d1a38636e9fa.jpg?q=50">
<img src="https://rukminim1.flixcart.com/flap/1688/280/image/ce435d49852d2b8c.jpg?q=50">
</figure>
</div>
问题出在默认参数上figure标签，设置图像之间的间距。为了覆盖这些规则，添加display: flex以及这些其他规则.carousel figure选择器。
它应该看起来像这样：
.carousel figure {
position: relative;
width: 600vw;
animation: 25s slider infinite;
display: flex;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
}
或者像这样：
.carousel figure {
position: relative;
width: 600vw;
animation: 25s slider infinite;
display: flex;
margin: 0;
}
/*carousel container*/
.carousel {
overflow: hidden;
}
/*figure tag containing carousel*/
.carousel figure {
position: relative;
width: 600vw;
animation: 25s slider infinite;
display: flex;
margin: 0;
}
/*carousel images*/
.carousel figure img {
width: 100vw;
}
/*animations for carousel*/
@keyframes slider {
0% {
left: 0vw;
}
14% {
left: 0vw;
}
15% {
left: -100vw;
}
29% {
left: -100vw;
}
30% {
left: -200vw;
}
44% {
left: -200vw;
}
45% {
left: -300vw;
}
59% {
left: -300vw;
}
60% {
left: -400vw;
}
74% {
left: -400vw;
}
75% {
left: -500vw;
}
90% {
left: -500vw;
}
100% {
left: 0vw;
}
}
<div class="carousel">
<figure>
<img src="https://rukminim1.flixcart.com/flap/1688/280/image/a341a61df77a5715.jpg?q=50">
<img src="https://rukminim1.flixcart.com/flap/1688/280/image/971922653b729a9e.jpg?q=50">
<img src="https://rukminim1.flixcart.com/flap/1688/280/image/4075d3bac7ced1e9.jpg?q=50">
<img src="https://rukminim1.flixcart.com/flap/1688/280/image/411e38f49c1486b4.jpg?q=50">
<img src="https://rukminim1.flixcart.com/flap/1688/280/image/8c30d1a38636e9fa.jpg?q=50">
<img src="https://rukminim1.flixcart.com/flap/1688/280/image/ce435d49852d2b8c.jpg?q=50">
</figure>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
