<div class="slider">
<div class="img curry" style="display: block">1</div>
<div class="img" style="display: none">2</div>
<div class="img" style="display: none">3</div>
<div class="img" style="display: none">4</div>
<div class="img" style="display: none">5</div>
<div class="img" style="display: none">6</div>
</div>
.img[style],
.img.curry {
display: block;
}
width: 100%
на flex: 1 0 auto;
.box-shadow: 0 0 0 9999px #fff;
<section class="section">
<div class="section__inner container">
<div class="text-block">
<h2>Lorem ipsum.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis sequi nam temporibus quibusdam possimus repudiandae veritatis, in autem! Repellat maiores quia neque aspernatur libero consequatur quod provident, explicabo voluptatum dolor!</p>
</div>
</div>
</section>
body {
margin: 0;
font: 100%/1.4 sans-serif;
}
.container {
margin-left: auto;
margin-right: auto;
max-width: 960px;
}
.section {
position: relative;
height: 100vh;
color: #FFF;
background-color: #FFC056;
}
.section::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 50%;
background: url("http://placeimg.com/400/400") no-repeat 50% / cover;
}
.section__inner {
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
.text-block {
box-sizing: border-box;
padding: 2em;
width: 50%;
margin-left: 50%;
}