Show one div’s contents at a time every 4 seconds

I have a bunch of slide divs inside of a wrapper container. As you can see I have two of them set to display: none initially. Every 4000ms I would like to smoothly transition into the next slide. I have tried a few things with set interval in js and no luck.

Here is my code:

body {
  padding: 0;
  margin: 0;
}

.wrapper {}

.slide {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100vh;
}

img {
  outline: solid 5px #fff;
}

.single img {
  width: 100%;
  height: 100%;
}

.split img {
  width: 50%;
  height: 100%;
}

.quad img {
  width: 50%;
  height: 50%;
}
<div class="wrapper">
  <div class="slide single">
    <img src="https://dummyimage.com/3840x2160/000/fff">
  </div>

  <div class="slide split" style="display: none;">
    <img src="https://dummyimage.com/3840x2160/000/fff">
    <img src="https://dummyimage.com/3840x2160/000/fff">
  </div>

  <div class="slide quad" style="display: none;">
    <img src="https://dummyimage.com/3840x2160/000/fff">
    <img src="https://dummyimage.com/3840x2160/000/fff">
    <img src="https://dummyimage.com/3840x2160/000/fff">
    <img src="https://dummyimage.com/3840x2160/000/fff">
  </div>
</div>