Javascript 引导转盘幻灯片将网站的元素和内容搞乱

我决定在我的网站上实现引导旋转木马，我从中获得了代码，我按照如何在我的网站上应用幻灯片的说明进行了操作，幻灯片工作得很好，但它弄乱了我网站的元素

一个例子是，当我在我的网站上应用幻灯片时，我的字体是Merriweather衬线，它比以前变轻了，即使在CSS中字体是粗体的。这也发生在我的链接上

另一件事是它增加了我的页脚和导航栏的宽度

我试图对这个问题进行更多的研究，但我找不到有类似问题的人

这是我的网站的一张图片，没有引导转盘幻灯片放映代码：

我真的希望我的网站有引导旋转幻灯片，因为它增加了互动性，但同时我不希望我的内容和元素发生急剧变化

如果您能帮助解决这个问题，我们将不胜感激

这是CSS和HTML（如果您想查看引导旋转木马幻灯片对我的网站上的元素和内容的效果，请运行下面的代码片段）

html，
身体{
背景色：#09018a；
}
#容器{
宽度：1200px；
高度：1300px；
边框：3px实心#ffbd1e；
背景色：#FFFFFF；
位置：绝对位置；
左：140像素；
顶部：8px；
}
#导航{
宽度：1200px；
高度：75px；
字号：1.5em；
字体大小：粗体；
文本对齐：居中；
背景色：#d7001f；
位置：绝对位置；
顶部：250px；
}
#页脚{
宽度：1200px；
高度：100px；
位置：相对位置；
背景色：#d7001f；
顶部：570px；
字体系列：“Merriweather”，衬线；
}
#页脚a：悬停{
颜色：rgb（0,0,255）；
字体大小：粗体；
}
#旋转木马{
宽度：400px；
高度：300px；
位置：绝对位置；
顶部：450px；
左：750px；
填充：10px；
利润率：30像素；
z指数：3；
边框：3px实心#000000；
}
收割台img{
位置：相对位置；
左：500px；
}
#李海军{
显示：内联；
字体系列：“Merriweather”，衬线；
}
#导航a{
文字装饰：无；
}
#导航a：链路{
显示：内联块；
宽度：200px；
颜色：#5c3205；
边界半径：8px；
盒影：1px 1px 2px 2px#f26522；
背景色：#e79806；
文本阴影：3px2p3px#aaa；
位置：相对位置；
顶部：20px；
左：5px；
}
#导航a：悬停{
颜色：#ff0000；
}
#导航a：已访问{
颜色：#5c3205；
}
p{
字号：18px；
}
h3{
字体大小：15px；
}
h4{
字体大小：15px；
字体：斜体；
}
.故事1{
宽度：700px；
高度：600px；
位置：相对位置；
左：50px；
顶部：300px；
填充物：5px；
字体系列：“Merriweather”，衬线；
字体大小：粗体；
}
.故事3{
宽度：450px；
高度：200px；
位置：绝对位置；
右：700px；
顶部：900px；
边缘顶部：20px；
字体系列：“Merriweather”，衬线；
字体大小：粗体；
}
.故事3李{
边缘底部：15px；
字号：18px；
}

课程大纲
塔瓦学院的计算机科学
DITCS101
在DITCS101中，您将学习Python、CSS3、HTML5和Scratch等编程语言，还将学习使用Webflow来设计您的网站，而无需任何编码。您将通过进行各种评估来测试这些编程语言
例如，使用Python为特定任务构建基本的计算机程序，使用Notepad++制作原型（如网站）以解决简短的问题。

DITCS201
在DITCS201中，您对Python、CSS3、HTML5等编程语言的知识将得到扩展，您将学到新的技术和功能，并将在各种评估中加以利用。您还将学习服务器端的PHP
为web开发设计的脚本语言，以及MYSQL，它是世界上第二常用的关系数据库管理系统。

DITCS301
在DITCS301中，您对Python、CSS3、HTML5、PHP和MYSQL的了解将进一步扩展，以用于各种评估，并学习JQUERY为网站创建动画。





引导转盘幻灯片放映
关于学习的课程小册子








Kyle Josef的网站徽标，用在正斜杠下，小于标志和屏蔽轮廓的大小。护盾轮廓颜色变为黄色。

我可以使用Bootsrap中的标准旋转木马，但您应该能够以与我相同的方式解决此问题：我通过在旋转木马类中放置高z索引来解决此问题

z-index: 1000;