Css абсолютно без покрытия всего

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>

Я пытался с абсолютным, но он охватывает раздел заголовка, который я не хочу ...

Если вы хотите, вы можете увидеть сайт в разработке здесь .

Заранее спасибо.

Answer 1

вам нужно установить body на width: 100vw;. Если вы добавите margin: auto, вы не будете знать, сколько вам нужно, чтобы переместить ползунок, чтобы сделать его на всю ширину body (и не устанавливая его в position: absolute).

Я предлагаю вам удалить поле на теле и сделать его полностью шириной области просмотра. тогда вы можете сделать это так:

• сделать слайдер полной ширины (width: 100% или width: 100vw)
• сделать figure в два раза больше родительского размера (width: 200%)
• сделать каждый img размер ползунка (который составляет половину размера figure) (width: 50%)
• изменить figure на гибкий элемент с направлением строки и без переноса
• заставляет анимацию работать с translate3d вместо left и right, так как мы используем статическую позицию (по умолчанию)

Вам также необходимо изменить некоторые дочерние элементы тела, чтобы исправить факт изменения его ширины:

• make header & .service_content width: 90%;. он должен оставаться в центре, потому что body имеет display: flex; align-items: center; set.

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%
}

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