我正在寻求创建类似于以下的视觉效果：
https://tympanus.net/Development/AnimatedResponsiveImageGrid/index3.html
尽管有很大的不同，我将有许多内容配对，将以图块的形式显示，在配对中，将图块翻转并在5秒后自动替换为第二个图块。
一旦发生这种情况，在先前翻转的同一图块中，它将被另一个图块配对替换，该配对也将翻转，然后再次替换。
以此类推，无限循环。
以下是细分：
-从CMS输出的20个内容项的块中，随机显示10个。
-从元素位置1开始，用配对中的其他特定内容替换内容。例如，下面的第一组由第二组替换：
<div class="wppf-featured__item">
<div class="wppf-featured__item__inner">
<img class="wppf-featured__item__image" src="https://via.placeholder.com/250x250" alt="">
<div class="wppf-featured__item__details">
<span class="price">GROUP 1</span>
</div>
</div>
</div>
<div class="wppf-featured__item--gone">
<div class="wppf-featured__item__inner">
<img class="wppf-featured__item__image" src="https://via.placeholder.com/250x250&text=GONE" alt="">
<span class="price">GROUP 2</span>
</div>
</div>
-像上面一样，随机移动位置2、3、4、5、6、7、8、9、10，然后将内容替换为另一个内容项。
-在每种情况下，一旦替换了内容配对，就再次用CMS输出的20个项目中的另一个内容配对替换该配对。
-在无限循环中循环。
我有一个循环工作，可以在项目配对之间自动切换，请在此处查看笔：
https://codepen.io/juxprose/pen/JaKyWm
我正在考虑使用Math.random()和.slice()来显示10个随机项目，然后用replaceWith()来替换元素，但是放在一起并没有成功。
这个旧插件确实很接近，但是不能完全满足要求：