Question

如何让我的幻灯片占据整个宽度？

@keyframes slider {
0% {
	left: 0;
}
25% {
	left: 0;
}
50% {
	left: -100%;
}
75% {
    left: -100%;
}
100% {
		right: -200%;
}
}
#slider {
	overflow: hidden;
}
#slider figure img {
	width: 20%;
}
#slider figure {
	position: relative;
	width: 500%;
	margin: 0;
	left: 0;
	text-align: left;
	font-size: 0;
	animation: 20s slider infinite;
}

	<div id="slider" >
	<figure>
	<img src="webagency_images/images/slider/bg1.jpg">
	<img src="webagency_images/images/slider/bg2.jpg">
	</figure>
	</div>

我尝试使用绝对，但它涵盖了标题部分，我不想要...

如果您希望看到正在建设的网站here。

提前谢谢你。

Answer 1

您需要将body设置为width: 100vw;。如果您添加margin: auto，则无法知道移动滑块需要多少才能使其成为body的全宽（并且不会将其设置为position: absolute ）。

我建议你移除身体上的边距并使其成为全视口宽度。然后，你可以这样做：

使滑块全宽（width: 100%或width: 100vw）
将figure两倍于其父级（width: 200%）
使每个img滑块的大小（大小为figure的一半）（width: 50%）
将figure更改为带有行方向的 flex元素，不带包装
使用translate3d代替left和right制作动画，因为我们使用静态位置（默认位置）

您还需要更改一些正文的子元素，以便更正其宽度发生变化的事实：

制作header＆amp; .service_content width: 90%;。它应该保持居中，因为body设置了display: flex; align-items: center;。

＆＃13;

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  overflow-x: hidden;
}

@keyframes slider {
  0% {
    transform: translate3d(0, 0, 0);
  }
  25% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-50%, 0, 0);
  }
  75% {
    transform: translate3d(-50%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

.slider figure {
  margin: 0;
  text-align: left;
  font-size: 0;
  animation: 20s slider infinite;
}


/* things you need to change */

body {
  width: 100vw;
  margin: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

header,
.service_content {
  width: 90%;
}

.slider {
  width: 100%;
  overflow: hidden;
}

.slider figure {
  display: flex;
  align-items: flex-start;
  width: 200%;
  overflow: hidden;
}

.slider figure img {
  width: 50%
}

＆＃13;

<!-- Section Slider -->
<div id="slider" class="slider">
  <figure>
    <img src="https://brunoc.ovh/webagency/webagency_images/images/slider/bg1.jpg">
    <img src="https://brunoc.ovh/webagency/webagency_images/images/slider/bg2.jpg">
  </figure>
</div>

＆＃13;

Css绝对没有涵盖一切

1 个答案: