JSFiddle - React, Tailwind, and code Playground

HTML

<div id="next_match">
  <div class="knopka1 demonstration">
    <a href="http://jsfiddle.net/xafyezgb/16/">
      <img src="https://metalist1925.com/sys/images/football_logos/metalurg.png">
    </a>
  </div>
  <div class="knopka1">
    <a href="https://starper55plys.ru/javascript-i-jquery/karusel-na-javascript/">
      <img src="https://metalist1925.com/sys/images/football_logos/1925.png">
    </a>
  </div>
  <div class="knopka1">
    <a href="http://jsfiddle.net/xafyezgb/16/">VS</a>
  </div>
</div>

CSS

#next_match{
	position: relative;
}

.knopka1{
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
  width: 0;
  overflow: hidden;
	transition: all 3s; /* Время появления картинки */
}

.demonstration{
	opacity: 1;
  width: 100%;
}

JavaScript

var knopkas = document.querySelectorAll('#next_match .knopka1');
var currentKnopka = 0;
var knopkaInterval = setInterval(nextKnopka,5000); /* Интервал между картинками */

function nextKnopka() {
	knopkas[currentKnopka].className = 'knopka1';
	currentKnopka = (currentKnopka + 1) % knopkas.length;
	knopkas[currentKnopka].className = 'knopka1 demonstration';
}