Are you looking to design a slider with 3 image containers all in the same row, where the third one overflows instead of wrapping to a new line? Here is an example:
Desired Design:
https://i.stack.imgur.com/dKyEg.png
Current State:
https://i.stack.imgur.com/zENP7.png
HTML Code:
<div class="image-slide-wrapper">
<div class="images-section">
<div class="image-slide">
<div class="slide-img">
</div>
</div>
<div class="image-slide">
<div class="slide-img">
</div>
</div>
<div class="image-slide">
<div class="slide-img">
</div>
</div>
</div>
</div>
SCSS Code:
.image-slide-wrapper {
float: left;
height: 55%;
width: 100%;
.images-section {
float: left;
height: 85%;
width: 100%;
border: 1px solid grey;
border-radius: 8px;
overflow: hidden;
padding: 0.125rem;
}
.image-slide {
float: left;
height: 100%;
width: 100px;
margin-right: 0.25rem;
.slide-img {
float: left;
height: 100%;
width: 100%;
border-radius: 0.35rem;
background-color: #e9e9e9;
Note: The slider uses the images-section class for the slider and the image container is under the image-slide class. It's important to use float for consistency with the rest of the code.