Bootstrap 4 将引导3中制作的幻灯片转换为引导4

当我将其更改为bootstrap4时，所有图像都被合并，并且它们不考虑类的400%宽度#slide ul，我唯一要做的是将相对位置设置为fixed，但卷轴和其他元素（如页面和箭头）被放在后面，我不想使用bootstrap4中的.carousel类，因为这个项目更大，我所做的是删除几个标签和元素，这样我的问题就更简洁了

/*变量*/
var项=0；
var interrumpirCiclo=假；
var项=0；
var ItemPagination=$（“#Pagination li”）；
var interrumpirCiclo=假；
var imgProducto=$（“.imgProducto”）；
var titulos1=$（“幻灯片h1”）；
var titulos2=$（“#幻灯片h2”）；
var titulos3=$（“幻灯片h3”）；
var btnVerProducto=$（“#滑动按钮”）；
var detenerIntervalo=假；
var-toogle=false；
$（“#幻灯片ul li”）.css（{“宽度”：100/$（“#幻灯片ul li”）.length+“%”）
$（“#幻灯片ul”）.css（{“宽度”：$（“#幻灯片ul li”）.length*100+“%”}）
$（imgProducto[item]）。动画（{“top”：-10+“%”，“opacity”：0}，100）
$（imgProducto[item]）。设置动画（{“top”：30+“px”，“不透明”：1}，600）
$（“#分页li”）。单击（函数（）{
item=$（this.attr（“item”）-1；
活动幻灯片（项目）；
})
函数avanzar（）{
如果（项目==$（“#幻灯片ul li”）。长度-1）{
项目=0；
}否则{
项目++
}
interrumpirCiclo=真；
活动幻灯片（项目）；
}
$（“#幻灯片#avanzar”）。单击（函数（）{
avanzar（）；
})
/*=============================================
后分离机
=============================================*/
$（“#幻灯片#后退”）。单击（函数（）{
如果（项==0）{
项目=$（“#幻灯片ul li”）。长度-1；
}否则{
项目--
}
活动幻灯片（项目）；
})
功能移动幻灯片（项目）{
// http://easings.net/es
$（“#幻灯片ul”）。动画（{“左”：项*-100+“%”}，1000）
$（“#pagination li”）.css（{“不透明”：.5}）
$（itempagination[item]）.css（{“不透明”：1}）
interrumpirCiclo=真；
}
setInterval（函数（）{
if（interrumpirCiclo）{
interrumpirCiclo=假；
}否则{
如果（！detenerIntervalo）{
avanzar（）；
}
}
},3000)
/*=============================================
弗莱查斯公寓
=============================================*/
$（“#幻灯片”）.mouseover（函数（）{
$（“#幻灯片#后退”）.css（{“不透明度”：1}）
$（“#幻灯片#avanzar”）.css（{“不透明度”：1}）
detenerIntervalo=真；
})
$（“#幻灯片”）.mouseout（函数（）{
$（“#幻灯片#后退”）.css（{“不透明度”：0}）
$（“#幻灯片#avanzar”）.css（{“不透明度”：0}）
detenerIntervalo=假；
})

/*幻灯片*/
#滑梯{
位置：相对位置；
保证金：自动；
宽度：100%；
溢出：隐藏；
填充：0；
}
#幻灯片ul{
位置：相对；/*en B4功能固定*/
宽度：400%；
左：0%；
保证金：自动；
高度：自动；
明确：两者皆有；
显示：表格；
填充：0px；
}
#幻灯片ul li{
位置：相对位置；
浮动：左；
宽度：25%；
}  
#幻灯片ul li img{
宽度：100%；
}
/*===分页===*/
#幻灯片#页码{
位置：相对；/*en B4功能固定*/
宽度：100%；
保证金：自动；
文本对齐：居中；
线高：40px；
字体大小：12px；
底部：0px；
左：0；
z指数：1；
背景：rgba（0,0,0,05）；
}
#幻灯片#Pagination li{
显示：内联块；
利润率：0px 5px；
光标：指针；
不透明度：.5；
颜色：白色；
文本阴影：0px 0px 5px#333；
}
#幻灯片#Pagination li：第一个孩子{
不透明度：1；
}
/*=============================================
ESCRITORIO GRANDE（xl revisamos en 1366px en Adelente）
=============================================*/
@介质（最小宽度：1200px）{
#滑块#回缩器{
最高：45%；
填充：40px 15px 40px 10px；
字体大小：22px；
}
#幻灯片#avanzar{
最高：45%；
填充：40px 10px 40px 15px；
字体大小：22px；
}
#幻灯片。幻灯片图标h1{
字体大小：50px；
边缘顶部：5px；
}
#幻灯片。幻灯片图标h2{
字体大小：35px；
}
#幻灯片。幻灯片图标h3{
字体大小：30px；
}
#滑动。滑动按钮{
填充：10px；
}
}
/*=============================================
ESCRITORIO MEDIANO水平平板电脑（lg revisamos en 1024px）
=============================================*/
@介质（最大宽度：1199px）和（最小宽度：992px）{
#滑块#回缩器{
顶部：45%；/*esto无se porq无功能A*/
填充：40px 15px 40px 10px；
字号：18px；
}
#幻灯片#avanzar{
最高：45%；
填充：40px 10px 40px 15px；
字号：18px；
}
#幻灯片。幻灯片图标h1{
字体大小：35px；
边缘顶部：5px；
}
#幻灯片。幻灯片图标h2{
字体大小：20px；
/*显示：无*/
}
#幻灯片。幻灯片图标h3{
字体大小：15px；
/*边缘底部：-5px*/
}
#滑动。滑动按钮{
填充：10px；
}
}
/*=============================================
ESCRITORIO PEQUEñO垂直平板电脑（md revisamos en 768px）
=============================================*/
@介质（最大宽度：991px）和（最小宽度：768px）{
#滑块#回缩器{
最高：35%；
填充：30px 8px 30px 5px；
字体大小：14px；
}
#幻灯片#avanzar{
最高：35%；
填充：30px 5px 30px 8px；
字体大小：14px；
}
#幻灯片。幻灯片图标h1{
字体大小：25px；
边缘顶部：5px；
}
#幻灯片。幻灯片图标h2{
字体大小：20px；
}
#幻灯片。幻灯片图标h3{
字体大小：15px；
/*边缘底部：-5px*/
}
#滑动。滑动按钮{
填充物：5px；
}
}
/*=============================================
MOVIL（sm修订版en 320px）==>修订版en 576和borras el 320
=============================================*/
@介质（最大宽度：767px）和（最小宽度：576px）{
#滑梯，弗莱查斯{
显示：无；
}
#幻灯片。幻灯片图标h1{