CSS中的图片轮播无法正常工作 [英] Image carousel in css not working properly

问题描述

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

I'm making a carousel of a website but I'm having problem with the width. I want each image to take full width of the viewport but the last image is appearing below the first image. Even the slider animation is not sliding the images properly, by sliding extra content on the right. Any help would be appreciated

/*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图形选择器.

The problem was with the default parameters of the figure tag, which set the spacing between the images. In order to override these rules, add the display: flex and these other rules to the .carousel figure selector.

它应该看起来像这样:

.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>

这篇关于CSS中的图片轮播无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！