Javascript 将项目符号导航栏放置在幻灯片中

我创建了一个网站，在那里我有一个带项目符号导航的幻灯片，我想它叫项目符号，但它位于幻灯片的外部，我希望它位于靠近底部的内部

但是我不知道怎么做。如何将用于导航的圆圈放置在幻灯片图像中

为了让您看到图像的问题，我将其放置在免费主机中：

var秒=5//时间自动滑动
变量滑块=$（“#滑块”）；
var images=$（“#slider.images”）；
var controls=$（''）.addClass（'controls'）；
滑块后（控制）；
var width=images.width（）；
var slideClick=function（）{
var b=$（本）；
$（'.controls div'）.removeClass（'current'）；
b、 addClass（“当前”）；
var指数=b.指数（）；
css（'left'，-1*索引*宽度）；
};
$（'#slider.images img'）。每个（函数（i）{
var img=$（本）；
img.css（'左'，i*宽）；
var按钮=$（''）；
控件。追加（按钮）；
如果（i==0）{
button.addClass（'当前'）
}
按钮。单击（函数（）{
clearInterval（自动滑动间隔）；
滑动单击。应用（此）；
setTimeout（函数（）{
设置间隔（自动滑动，秒*1000）；
}，延迟*1000）；
});
});
var autoSlide=函数（）{
var next=$（'.controls.current'）.next（）；
如果（下一个长度）{
滑动单击。应用（下一步）；
}否则{
var first=$（'.controls div'）.first（）；
滑动单击。应用（第一）；
}
};
var autoSlideInterval=setInterval（autoSlide，秒*1000）
html，
身体{高度：100%；}
身体{
保证金：0；
字体系列：“开放式Sans”、Helvetica、Sans serif；
最小宽度：900px；
}
.标题{
背景图片：url（“img/fundo1.jpg”）；
背景色：rgb（21,21,21）；
背景尺寸：封面；
颜色：白色；
身高：100%；
最小高度：650px；
位置：相对位置；
}
.标题.徽标{
宽度：230px；
高度：60px；
利润率：20px 8px 8px 6%；
}
.标题.菜单{
位置：绝对位置；
顶部：55像素；右侧：25像素；
}
.标题.菜单a{
利润率：0.4px；
字体大小：15px；
颜色：白色；
文字装饰：无；
填充：6px 20px；
}
.标题.菜单a:悬停，
.标题.菜单a.当前{
颜色：rgb（204,66,63）；
}
.头球，移动{
颜色：白色；
宽度：40%；
保证金：0；
填充：10px；
}
.头球，移动，居中{
保证金：260px自动0；
宽度：360px；
}
.标题。移动h1{
字体大小：400；
字号：38px；
利润率：6px0；
}
.标题.移动p{
字体大小：300；
字体大小：20px；
边框顶部：2件纯白；
利润率：6px0；
填充顶部：6px；
}
.header.mail1{
背景图片：url（“img/email.png”）；
背景尺寸：包含；
背景位置：100%100%；
背景重复：无重复；
宽度：560像素；高度：560像素；
位置：绝对位置；
底部：0；右侧：0；
}
.header.mail1表格{
位置：绝对位置；
宽度：240px；
底部：220px；右侧：155px；
}
.header.mail1h1{
字体大小：300；
文本对齐：居中；
颜色：rgb（203,41,37）；
}
.header.mail1输入{
框大小：边框框；
宽度：100%；
字体系列：“开放式Sans”、Helvetica、Sans serif；
填充：8px；
边框：1px实心rgb（219219218）；
边界半径：6px；
边缘底部：12px；
}
.header.mail1输入：悬停{
边框：1px实心rgb（189189188）；
}
.header.mail1输入：焦点{
大纲：0；
}
.header.mail1A{
显示：块；
颜色：白色；
文字装饰：无；
背景色：rgb（204,66,63）；
边界半径：6px；
文本对齐：居中；
填充：8px；
字体大小：14px；
}
.header.mail1A:悬停{
背景色：rgb（224,86,83）；
}
.mail2{
盒影：10px 6px 15px灰色；
背景色：白色；
背景图片：url（“img/barra.png”）；
背景位置：12%0%；
高度：100px；
背景重复：无重复；
文本对齐：右对齐；
}
#btn{
宽度：10em；
}
.mail2.fixed{
盒影：10px 6px 15px灰色；
位置：固定；
显示：块；
顶部：0；左侧：0；
宽度：100%；
最小宽度：800px；
高度：100px；
z指数：1；
}
.mail2表格{
显示：内联块；
利润率：30px0；
填充：0 10px；
宽度：600px；
}
.mail2 h1{
字体大小：300；
颜色：rgb（203,41,37）；
显示：内联；
垂直对齐：中间对齐；
字号：28px；
}
.mail2输入{
框大小：边框框；
宽度：220px；
字体系列：“开放式Sans”、Helvetica、Sans serif；
填充：8px；
边框：1px实心rgb（219219218）；
边界半径：6px；
边际：0.6px；
}
.mail2输入：悬停{
边框：1px实心rgb（189189188）；
}
.mail2输入：焦点{
大纲：0；
}
.Mail2a{
显示：内联；
颜色：白色；
文字装饰：无；
背景色：rgb（204,66,63）；
边界半径：6px；
文本对齐：居中；
填充：8px4%；
字体大小：14px；
}
.mail2A:悬停{
背景色：rgb（224,86,83）；
}
.mail2.top{
填充：8px 6px；
背景色：rgb（51,51,51）；
}
.mail2.top:悬停{
背景色：rgb（71,71,71）；
}
#滑块{
宽度：100%；
身高：90%；
溢出：隐藏；
}
#滑块.图像{
宽度：100%；
位置：相对位置；
过渡：左1秒；
左：0；
}
#滑块。图像img{
z指数：-1；
宽度：100%；
背景大小：100%；
位置：绝对位置；
}
.控制{
宽度：350px；
保证金：0自动；
显示器：flex；
证明内容：中心；
}
.管制组{
宽度：16px；
高度：16px；
利润率：0.5px；
背景：番茄；
边界半径：50%；
}
.控制。当前{
背景：红色；
}
巴拉先生2{
背景图片：url（'img/barra2.png'）；
背景尺寸：封面；
垫底：21.6%；
}
.手机{
背景图片：url（“img/fundos.jpg”）；
背景尺寸：封面；
背景色：rgb（171171171）；
颜色：白色；
垫底：44.4%；
位置：相对位置；
}
.mobile.invisi{
位置：绝对位置；
宽度：13%；
身高：10%；
底部：14%；
边界半径：8px；
}
.mobile.invisi:悬停{
背景：白色；
不透明度：0.2；
}
.mobile.appstore{
右：26.5%；
}
.mobile.googleplay{
右：11.5%；
}
.联系方式{
背景图片：url（“img/fundo2es.jpg”）；
背景大小：100%；
背景色：
.controls > div {
  margin-top: -20px;
}