Is it feasible to develop a slider that extends beyond its parent elements and the body?
The concept involves having content within a section housed in a container. The slider would be part of this section, with slides overflowing past the parent element and body.
The vertical scroll would match the width of the container, but you would still be able to see slides outside of the container.
h2{
text-align: center;
}
.container{
margin: 0 auto;
max-width:460px;
border: 2px solid #ef34ed
}
.slider{
display: flex;
align-items: center;
jusify-content: flex-start;
overflow-x: scroll;
}
.slide + .slide {
margin-left: 50px;
}
.slide{
text-align: center;
}<div class="section">
<div class="container">
<div class="row">
<h2>Some title</h2>
<div class="slider">
<div class="slide">
<img src="https://via.placeholder.com/150" alt="person" />
</div>
<div class="slide">
<img src="https://via.placeholder.com/150" alt="person" />
</div>
<div class="slide">
<img src="https://via.placeholder.com/150" alt="person" />
</div>
<div class="slide">
<img src="https://via.placeholder.com/150" alt="person" />
<p>Name</p>
</div>
<div class="slide">
<img src="https://via.placeholder.com/150" alt="person" />
<p>Name</p>
</div>
<div class="slide">
<img src="https://via.placeholder.com/150" alt="person" />
<p>Name</p>
</div>
<div class="slide">
<img src="https://via.placeholder.com/150" alt="person" />
</div>
<div class="slide">
<img src="https://via.placeholder.com/150" alt="person" />
</div>
<div class="slide">
<img src="https://via.placeholder.com/150" alt="person" />
</div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fringilla nisl eget ligula tincidunt, ut mattis velit ultricies. Sed efficitur odio vel ullamcorper lacinia. Curabitur vitae tortor mauris. In condimentum tellus ac fermentum sodales. Aenean varius metus nec sollicitudin tristique.
</p>
</div>
<div>
</div>