如何在一页jQuery修复中多次使用此滑块

我想多次重复使用此滑块，但目前，使其工作的jQuery只对一个滑块工作，因此其他滑块next和prev以及dots不工作，因为它们共享相同的id我不想重复我自己，因此使用jQuery的解决方案将很有帮助

已尝试。最近。查找jQuery方法

jQuery（文档）.ready（函数（）{
函数检测_活动（）{
//活跃起来
var get_active=$（“#dp slider.dp_item:first child”）.data（“类”）；
$（“#dp dots li”）.removeClass（“活动”）；
$（“#dp dots li[data class=“+get_active+”]”）addClass（“active”）；
}
$（“#dp next”）。单击（函数（）{
var总计=$（“.dp_项”）。长度；
$（“#dp slider.dp#u item:first child”）.hide（）.appendTo（“#dp slider”）.fadeIn（）；
$。每个（$（'.dp_项'），函数（索引，dp_项）{
$（dp_项）.attr（'数据位置'，索引+1）；
});
检测_活动（）；
});
$（“#dp prev”）。单击（函数（）{
var总计=$（“.dp_项”）。长度；
$（“#dp slider.dp#u item:last child”）.hide（）.prependTo（“#dp slider”）.fadeIn（）；
$。每个（$（'.dp_项'），函数（索引，dp_项）{
$（dp_项）.attr（'数据位置'，索引+1）；
});
检测_活动（）；
});
$（“#dp dots li”）。单击（函数（）{
$（“#dp dots li”）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
var get_slide=$（this.attr（'data-class'）；
控制台日志（获取幻灯片）；
$（“#dp slider.dp_item[data class=“+get#u slide+”]）.hide（）.prependTo（“#dp slider”）.fadeIn（）；
$。每个（$（'.dp_项'），函数（索引，dp_项）{
$（dp_项）.attr（'数据位置'，索引+1）；
});
});
$（“body”）。在（“单击”，“dp滑块”。dp_项：非（：第一个子项）”，函数（）上{
var get_slide=$（this.attr（'data-class'）；
控制台日志（获取幻灯片）；
$（“#dp slider.dp_item[data class=“+get#u slide+”]）.hide（）.prependTo（“#dp slider”）.fadeIn（）；
$。每个（$（'.dp_项'），函数（索引，dp_项）{
$（dp_项）.attr（'数据位置'，索引+1）；
});
检测_活动（）；
});
});
*{
字体系列：“Lato”，无衬线；
}
.dp包装{
保证金：0自动；
位置：相对位置；
透视图：1000px；
身高：100%；
}
.dp滑块{
身高：100%；
宽度：100%；
位置：绝对位置；
变换样式：保留-3d；
}
.dp滑块div{
变换样式：保留-3d；
}
.dp_项目{
显示：块；
位置：绝对位置；
文本对齐：居中；
颜色：#FFF；
边界半径：10px；
转变：转变1.2s；
}
.dp img img{
左边框：1px实心#fff；
}
#dp滑块。dp_项：第一个子项{
z指数：10！重要；
变换：旋转（0deg）平移（0px）！重要；
}
.dp_项[数据位置=“2”]{
z指数：9；
变换：旋转（0度）平移（10%）比例（0.9）；
}
.dp_项[数据位置=“3”]{
z指数：8；
变换：旋转（0度）平移（20%）比例（0.8）；
}
.dp_项[数据位置=“4”]{
z指数：7；
变换：旋转（0度）平移（30%）比例（0.7）；
}
#dp下一步，
#dp prev{
位置：绝对位置；
最高：50%；
右：16%；
高度：33像素；
宽度：33px；
z指数：10；
光标：指针；
}
#dp prev{
左：15px；
变换：旋转（180度）；
}
#dp点{
位置：绝对位置；
底部：25px；
z指数：12；
左：38%；
游标：默认值；
}
#李小点{
显示：内联块；
宽度：13px；
高度：13px；
背景：#ffff；
边界半径：50%；
}
#李：悬停{
光标：指针；
背景：#FA8C8C；
过渡：背景。3s；
}
#dp.li.active{
背景：#FA8C8C；
}
.dp_项目{
宽度：85%；
}
.dp内容，
.dp img{
文本对齐：左对齐；
}
.dp_项目{
显示器：flex；
对齐项目：居中；
背景：#fff；
边界半径：10px；
溢出：隐藏；
边框顶部：5px实心#FA8C8C；
}
.dp内容{
左侧填充：100px；
右边填充：0；
显示：内联块；
宽度：100%；
}
.dp含量h2{
颜色：#41414B；
字体系列：圆形Std粗体；
字体大小：48px；
最大宽度：460像素；
边缘顶部：8px；
边缘底部：0px；
}
.dp内容p{
颜色：#747F；
最大宽度：490px；
边缘顶部：15px；
字体大小：24px；
}
.dp内容.站点btn{
边缘顶部：15px；
字体大小：13px；
填充：19px 40px；
}
.dp img：之前{
背景：-webkit线性梯度（-90度，rgba（255，255，255，0.25），rgba（255，255，255，0））；
背景：-o-线性梯度（-90度，rgba（255，255，255，0.25），rgba（255，255，255，0））；
背景：-莫兹线性梯度（-90度，rgba（255，255，255，0.25），rgba（255，255，255，0））；
背景：线性梯度（-90度，rgba（255，255，255，0.75），rgba（255，255，255，0））；
内容：“；
位置：绝对位置；
身高：100%；
宽度：25%；
z指数：1；
排名：0；
指针事件：无；
背景：-webkit线性梯度（-90度，rgba（255，255，255，0），rgba（255，255，255，0.75））；
背景：-o-线性梯度（-90度，rgba（255，255，255，0），rgba（255，255，255，0.75））；
背景：-莫兹线性梯度（-90度，rgba（255，255，255，0），rgba（255，255，255，0.75））；
背景：线性梯度（-90度，rgba（255，255，255，0），rgb（255，255，255））；
}
.dp img img{
对象匹配：覆盖；
物体位置：右；
}
#dp滑块，
.dp img img{
高度：738px；
}
#dp滑块。dp_项：悬停：非（：第一个子项）{
光标：指针；
}
.站点btn{
颜色：#fff；
字号：18px；
字体系列：“圆形Std介质”；
背景:"FA8282,；
填充：14px 43px；
显示：内联块；
边界半径：2px；
位置：相对位置；
顶部：-12px；
文字装饰：