Javascript 如何将此边框与幻灯片相结合？

基本上，我已经创建了这个旋转边框和幻灯片。我想旋转的边界去周围的幻灯片，但是，我还没有找到一个方法来完成这项任务。我尝试过将div从边框移动到幻灯片代码，但是边框被搞乱了。如何实现边框，使其在幻灯片中显示？谢谢这是我的密码

正文{
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：100vh；
}
*，*：：之前，*：：之后{
框大小：边框框；
}
/*边界*/
@关键帧旋转{
100% {
变换：旋转（1圈）；
}
}
.彩虹{
位置：相对位置；
z指数：0；
宽度：400px；
高度：300px；
边界半径：10px；
溢出：隐藏；
填充：2rem；
}
彩虹：以前{
内容：''；
位置：绝对位置；
z指数：-2；
左-50%；
前-50%；
宽度：200%；
身高：200%；
背景色：#399953；
背景重复：无重复；
背景尺寸：50%50%，50%50%；
背景位置：0,100%0,100%100%，0,100%；
背景图像：线性梯度（#399953，#399953），线性梯度（#fbb300，#fbb300），线性梯度（#d53e33，#d53e33），线性梯度（#377af5，#377af5）；
动画：旋转4s线性无限；
}
.彩虹：：之后{
内容：''；
位置：绝对位置；
z指数：-1；
左：6px；
顶部：6px；
宽度：计算（100%-12px）；
高度：计算（100%-12px）；
背景：白色；
边界半径：5px；
}
/*幻灯片放映*/
.幻灯片{
宽度：700px；
高度：400px；
溢出：隐藏；
}
.中{
位置：相对位置；
顶部：200px；
左：50%；
转换：翻译（-50%，-50%）；
}
.导航{
位置：绝对位置；
底部：20px；
左：50%；
转化：translateX（-50%）；
显示器：flex；
}
.酒吧{
宽度：50px；
高度：10px；
边框：2px实心#3F69CA；
利润率：6px；
光标：指针；
过渡：0.4s；
}
.bar:悬停{
背景#3F69CA；
}
输入[name=“r”]{
位置：绝对位置；
可见性：隐藏；
}
.幻灯片{
宽度：500%；
身高：100%；
显示器：flex；
}
.滑动{
宽度：20%；
过渡：0.6s；
}
.slidess>h2{
位置：绝对位置；
最高：45%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：计算（100%-30px）；
文本对齐：居中；
填充：15px；
背景：rgba（255,255,255,6）；
颜色：rgb（24,23,23）；
字号：18px；
边界半径：5px；
可见性：隐藏；
不透明度：0；
过渡：所有。5s轻松；
z指数：2；
}
.幻灯片.幻灯片：悬停>h2{
能见度：可见；
不透明度：1；
}
.滑动式img{
宽度：100%；
身高：100%；
}
#r1：选中~.s1{
左边距：0；
}
#r2：选中。s1{
左边缘：-20%；
}
#r3：选中。s1{
左边缘：-40%；
}
#r4：已选中。s1{
左边缘：-60%；
}
#r1:选中~.navigation[for=“r1”]{
背景：#fff
}
#r2:选中~.导航[for=“r2”]{
背景：#fff
}
#r3:选中~.navigation[for=“r3”]{
背景：#fff
}
#r4:选中~.navigation[for=“r4”]{
背景：#fff
}
@介质（最小宽度：200px）和（最大宽度：899px）{
.幻灯片{
宽度：300px；
高度：201px；
溢出x：隐藏；
位置：相对位置；
顶部：90px；
}
}

答复
幻灯片1。
幻灯片2。
幻灯片3。
幻灯片4。

您可以试试这个

正文{
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：100vh；
}
*，*：：之前，*：：之后{
框大小：边框框；
}
/*边界*/
@关键帧旋转{
100% {
变换：旋转（1圈）；
}
}
.彩虹{
位置：相对位置；
z指数：0；
边界半径：10px；
溢出：隐藏；
填充：6px；
}
彩虹：以前{
内容：''；
位置：绝对位置；
z指数：-2；
左-50%；
前-50%；
宽度：200%；
身高：200%；
背景色：#399953；
背景重复：无重复；
背景尺寸：50%50%，50%50%；
背景位置：0,100%0,100%100%，0,100%；
背景图像：线性梯度（#399953，#399953），线性梯度（#fbb300，#fbb300），线性梯度（#d53e33，#d53e33），线性梯度（#377af5，#377af5）；
动画：旋转4s线性无限；
}
.彩虹：：之后{
内容：''；
位置：绝对位置；
z指数：-1；
左：6px；
顶部：6px；
宽度：计算（100%-12px）；
高度：计算（100%-12px）；
背景：白色；
边界半径：5px；
}
/*幻灯片放映*/
.幻灯片{
宽度：700px；
高度：400px；
溢出：隐藏；
}
.中{
位置：相对位置；
顶部：200px；
左：50%；
转换：翻译（-50%，-50%）；
}
.导航{
位置：绝对位置；
底部：20px；
左：50%；
转化：translateX（-50%）；
显示器：flex；
}
.酒吧{
宽度：50px；
高度：10px；
边框：2px实心#3F69CA；
利润率：6px；
光标：指针；
过渡：0.4s；
}
.bar:悬停{
背景#3F69CA；
}
输入[name=“r”]{
位置：绝对位置；
可见性：隐藏；
}
.幻灯片{
宽度：500%；
身高：100%；
显示器：flex；
}
.滑动{
宽度：20%；
过渡：0.6s；
}
.slidess>h2{
位置：绝对位置；
最高：45%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：计算（100%-30px）；
文本对齐：居中；
填充：15px；
背景：rgba（255,255,255,6）；
颜色：rgb（24,23,23）；
字号：18px；
边界半径：5px；
可见性：隐藏；
不透明度：0；
过渡：所有。5s轻松；
z指数：2；
}
.幻灯片.幻灯片：悬停>h2{
能见度：可见；
不透明度：1；
}
.滑动式img{
W