How could I fix the second image to play in the same row of the slider and so on if I add more images?

Question

I'm struggling with this problem. I have 2 images with an image as a background.I would like to maintain the same order in the same row while playing the slider images.

If there are other solutions , please, tell me.

These are some images that I have now on the website.

I have tried with flex or grid but It didn't work well maybe because I'm still a beginner.

Please and Thanks.

.containerSlider {

        display: grid;
        grid-template-columns: 20% 78%;
        gap: 10px;
    }
  
  .promocion {
        border-radius: 10px;
        width: 100%;
    }
.slider-container {
        width: auto;
        height: 320px;
        position: relative;
        overflow: hidden;
        z-index: 2;
    }
  
  
  .slider {
        /* width: 50%; */
        height: 100%;
        ;
        position: relative;
        animation: slide 7s linear infinite;


    }

    .play-animation {
        animation-play-state: running;
    }

    .pause-animation {
        animation-play-state: paused;

    }
  
  
  
  .wrapper2 {
        text-align: center;
        width: 100%;
        height: 100%;
        position: relative;

        background-image: url('./assets/img/ProductsBanner.jpg');
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background-size: cover;
        background-position: bottom;
        background-repeat: no-repeat;
        border-radius: 10px;
    }


    .wrapper3 {
        text-align: center;
        width: 100%;
        height: 100%;
        position: relative;



        background-image: url('https://media.revistagq.com/photos/620b8133cdbd44ca1dadc4bc/3:2/w_2334,h_1556,c_limit/bart-simpson.jpeg');
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background-size: cover;
        background-position: bottom;
        background-repeat: no-repeat;
        border-radius: 10px;
    }

import React, { useEffect, useState, useRef } from 'react';

function Contact() {
    const [playSlide, setPlaySlide] = useState(true);




    return (
        <div>
            <div className="containerSlider">
                <div className="boxa">
                    <img className="promocion" src={'http://localhost:3000/img/banner.gif'} height="321px" alt="banner" />

                </div>
                <div className="boxb">
                    <div className="slider-container">

                        <div className={playSlide ? "slider play-animation" : "slider pause-animation"}>




                            <div class="wrapper2">

                            </div>

                            <div class="wrapper3">

                            </div>




                        </div>
                    </div>
                </div>
               

            </div>


        </div>
    );

}

export default Contact;