css中的图像轮播无法正常工作答案

【问题标题】：Image carousel in css not working properlycss中的图像轮播无法正常工作
【发布时间】：2021-01-27 04:54:11
【问题描述】：

我正在制作网站的轮播，但宽度有问题。我希望每张图像都占据视口的全宽，但最后一张图像出现在第一张图像下方。通过在右侧滑动额外的内容，即使滑块动画也无法正确滑动图像。任何帮助将不胜感激

/*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>

【问题讨论】：

标签： html css

【解决方案1】：

问题在于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>

【讨论】：