I managed to get 3 images to the line next to each other. The next step I want to do is add the same 3 images next to each other, so I have 6 images in total inline.

What I want to achieve is to have a slide show that goes from the first 3 images to the next 3 images.

This is what I have so far:

HTML:

<div class="row">
    <div class="column animation">
      <img src="images/British citizenship and Immigration.jpg" alt="British citizenship and Immigration">
      <h1>British citizenship and Immigration</h1>
    </div>

    <div class="column">
      <img src="images/Australian Migration.jpg" alt="Australian Migration">
      <h1>Australian Migration</h1>
      <p>Our team can assist with a range of Australian visa solutions. Our expert knowledge ensures you receive the best advice for your personal circumstances.</p>
    </div>

    <div class="column">
      <img src="images/Citizenship by investment.jpg" alt="Citizenship by investment">
      <h1>Citizenship-by-investment</h1>
      <p>Enjoy the exclusive privileges that dual citizenship and international investment can provide. Our consultants can help you select the right programme and guide you every step of the way.</p>
    </div>

      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>
 
  </div>

CSS

.row {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    padding: 0px 8rem 0px 338px;
    margin-top: -33vh;
    margin-left:10vw;
  }

  .column {
    flex:10%;
    padding: 0 4px;
  }

  .prev, .next {
    cursor: pointer;
    position: relative;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: #115577;
    font-weight: bold;
    font-size: 30px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }

  .next {
    text-decoration: none;
    top:7rem;
    right: 26rem;
    border-radius: 3px 0 0 3px;
  }

  .prev
  {
    text-decoration: none;
    top:7rem;
    left: -126rem;
  }
  .column h1
  {
      font-size:16px;
      margin-left: 2.5rem;
  }

  .column img
  {
      margin-left:1vw;
  }

  .column p
  {
      text-align: center;
      margin-left: 0rem;
      margin-right: 25rem;
  }

  .animation {
    animation-name: animation;
    animation-duration: 1.5s;
  }
  
  @keyframes animation {
    from {opacity: .4}
    to {opacity: 1}
  }

I know to use Javascript to do the click event, but I am not there yet.