Изображение сетки с отдельными временными интервалами для изменения элементов сетки

Question

У меня есть сетка изображений с несколькими изображениями.Я пытаюсь изменить изображения в сетке в отдельные промежутки времени.то есть одна группа изображений в сетке будет меняться в конкретное время, а следующая группа изображений будет меняться в другом интервале по сравнению с первым.

Пример того, чего я пытаюсь достичь, показан по этой ссылке

https://tympanus.net/Development/AnimatedResponsiveImageGrid/

Я не ищу различные / разные анимации каждый раз (мне подходит только один тип перехода).

Ниже приведен мой код

Оценивая все ваши предложения и помощь

#main__slider{
  width:40rem;
  height:25rem;
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr)
}

.column1{
  border:1px solid;
  position:relative;
}

img{
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main__slider">
  <div class="column1">
    <img src="https://www.arup.com/-/media/arup/images/perspectives/themes/cities/cities-alive/cities-alive-header.jpg?h=1125&la=en&w=2000&hash=415B3F648DFB5F1822DD43328B988A2C78318E7F" alt="">
    <img src="https://livability.com/sites/default/files/Great%20Cities%20for%20Filmmakers.jpg" alt="">
  </div>
  <div class="column1">
    <img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg?itok=FSzwbBoi" alt="">
    <img src="https://d17fnq9dkz9hgj.cloudfront.net/uploads/2018/03/Pomeranian_01.jpeg" alt="">
  </div>
  <div class="column1">
    <img src="https://i.kinja-img.com/gawker-media/image/upload/s--vHt6tbFa--/c_scale,f_auto,fl_progressive,q_80,w_800/xjmx1csashjww8j8jwyh.jpg" alt="">
    <img src="https://www.drdavidludwig.com/wp-content/uploads/2017/01/1-RIS_6IbCLYv1X3bzYW1lmA.jpeg" alt="">
  </div>
  <div class="column1">
    <img src="https://www.railengineer.uk/wp-content/uploads/2017/10/AT300_HULL-TRAINS_with-logo.jpg" alt="">
    <img src="https://www.virginexperiencedays.co.uk/content/img/product/large/steam-train-trip-17104839.jpg" alt="">
  </div>
  <div class="column1">
    <img src="https://www.healthline.com/hlcmsresource/images/topic_centers/977-When_do_girls_stop_growing-732x549-thumbnail.jpg" alt="">
    <img src="https://images.askmen.com/1080x540/2018/09/06-125712-how_to_talk_to_girls_on_tinder.jpg" alt="">
  </div>
  <div class="column1">
    <img src="https://www.familyeducation.com/sites/default/files/inline-images/baby%20girl%20names%20image.jpg" alt="">
    <img src="https://cdn2.momjunction.com/wp-content/uploads/2015/03/Learning-Activities.jpg" alt="">
  </div>
  <div class="column1">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Team_Korea_Rio_2016_06.jpg/1200px-Team_Korea_Rio_2016_06.jpg" alt="">
    <img src="https://expo.advance.net/img/9c4d2bc2c7/width960/30gallery_state_indiv_gym_.jpeg" alt="">
  </div>
  <div class="column1">
    <img src="https://cdn4.sportngin.com/attachments/call_to_action/9127/0843/_7006687_large.jpg" alt="">
    <img src="https://cdn.vox-cdn.com/thumbor/4pOVrNf6Ezmge6_VKHgYmAyCNoU=/0x0:3642x2712/1200x800/filters:focal(1275x341:1857x923)/cdn.vox-cdn.com/uploads/chorus_image/image/54106607/usa_today_9864342.0.jpg" alt="">
  </div>
  <div class="column1">
    <img src="https://livability.com/sites/default/files/Great%20Cities%20for%20Filmmakers.jpg" alt="">
    <img src="https://media.wired.com/photos/59bafdf204afdc5248726f5c/master/w_2400,c_limit/BMW-TA.jpg" alt="">
  </div>
</div>