Is there a Way to have a Maximum Amount of Elements on a Screen?

Question

I have 4 boxes and want only 3 of them to be on the screen at a time. At the moment, I am using a flex-wrap to move the one that does not fit to the bottom, but the way I want it is for whatever element that does not fit to move to the end of the last element on the right, off the screen. Is this possible to do and if so how can I do it?

.bioSlider {
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.box {
    position: relative;
    display: inline-block;
    width: 360px;
    padding: 10px;
}

.slideImage {
    position: relative;
    height: 300px;
}

.slideImage img {
    object-fit: cover;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

.overlay {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #000000;
    opacity: 0;
    transition: 0.8s ease-in-out;
}

.detailBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
    background-color: #e8e8e8;
}

.slideImage > .overlay:hover {
    opacity: 50%;
}

<div> <!-- Cadet Slider -->
        <ul class = 'bioSlider'>
            <li class = 'cadetOne'>
                <div class = 'box'>
                    <div class = 'slideImage'>
                        <img src = '/Images/Red_Card.png' alt = 'Img A'>
                        <div class = 'overlay'>
                        </div>
                    </div>
                    <div class = 'detailBox'>Detail A</div>
                </div>
            </li>

            <li class = 'cadetOne'>
                <div class = 'box'>
                    <div class = 'slideImage'>
                        <img src = '/Images/Yellow_Card.png' alt = 'Img B'>
                        <div class = 'overlay'>
                        </div>
                    </div>
                    <div class = 'detailBox'>Detail B</div>
                </div>
            </li>

            <li class = 'cadetOne'>
                <div class = 'box'>
                    <div class = 'slideImage'>
                        <img src = '/Images/Blue_Card.png' alt = 'Img C'>
                        <div class = 'overlay'>
                        </div>
                    </div>
                    <div class = 'detailBox'>Detail C</div>
                </div>
            </li>

            <li class = 'cadetOne'>
                <div class = 'box'>
                    <div class = 'slideImage'>
                        <img src = '/Images/Green_Card.png' alt = 'Img D'>
                        <div class = 'overlay'>
                        </div>
                    </div>
                    <div class = 'detailBox'>Detail D</div>
                </div>
            </li>
        </ul>
    </div>

https://stackoverflow.com/questions/11851395/how-to-display-the-first-3-list-items-and-hide-the-rest-with-css-nth-child — epascarello, Dec 19 '22 at 22:37
“Move it to the end” – so you want an eternal carousel? — user3342816, Dec 19 '22 at 22:58
The end goal is an eternal carousel, but I first have to move any box that does not fit to the end of the right side, which is essentially every box besides the first 3. — Fen, Dec 19 '22 at 23:13

Is there a Way to have a Maximum Amount of Elements on a Screen?

0 Answers0