title: How could I fix the second image to play in the same row of the slider and so on if I add more images?
body: <p>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.</p>
  <p>If there are other solutions , please, tell me.</p>
  <p>These are some images that I have now on the website.</p>
  <p>I have tried with flex or grid but It didn't work well maybe because I'm still a beginner.</p>
  <p>Please and Thanks.</p>
  <p><img src="https://i.stack.imgur.com/czNTB.png" alt="1" /></p>
  <p><img src="https://i.stack.imgur.com/wAiMG.png" alt="2" /></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import React, { useEffect, useState, useRef } from 'react';
  
  function Contact() {
      const [playSlide, setPlaySlide] = useState(true);
  
  
  
  
      return (
          &lt;div&gt;
              &lt;div className="containerSlider"&gt;
                  &lt;div className="boxa"&gt;
                      &lt;img className="promocion" src={'http://localhost:3000/img/banner.gif'} height="321px" alt="banner" /&gt;
  
                  &lt;/div&gt;
                  &lt;div className="boxb"&gt;
                      &lt;div className="slider-container"&gt;
  
                          &lt;div className={playSlide ? "slider play-animation" : "slider pause-animation"}&gt;
  
  
  
  
                              &lt;div class="wrapper2"&gt;
  
                              &lt;/div&gt;
  
                              &lt;div class="wrapper3"&gt;
  
                              &lt;/div&gt;
  
  
  
  
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                 
  
              &lt;/div&gt;
  
  
          &lt;/div&gt;
      );
  
  }
  
  export default Contact; </code></pre>
  </div>
  </div>
  </p>