Javascript 自定义JQuery滑块不'；I don’我没有按预期工作

我试图在我的网站上为我的项目制作一个自定义滑块。 使用div标签来滑动对我来说很重要，因为我想包含更多关于它的信息，比如文本和按钮

它有一个“下一步”和“上一步”按钮问题在于它不会向后滑动，也不会在到达最后一张幻灯片后的开始处开始

怎么了

$（文档）.ready（函数（）{
projectSlider（$（'.projects'）.children（'.project'）.first（））；
函数项目滑块（项目）{
$（项目）.show（函数（）{
$（'.next'）。单击（函数（）{
if（projects.next（）.hasClass（'project'））{
projectSlider（projects.next（））；
}否则{
projectSlider（$（'.projects'）.children（'.project'）.first（））；
}
});
$（'.previous'）。单击（函数（）{
if（projects.prev（）.hasClass（'project'））{
projectSlider（projects.prev（））；
}否则{
projectSlider（$（'.projects'）.children（'.project'）.first（））；
}
});
});
}
});
html，
身体{
填充：0；
保证金：0；
宽度：100%；
身高：100%；
字体系列：“机器人浓缩”，无衬线；
}
/* */
a{
文字装饰：无；
}
h1，
h2，
h3，
h4，
h5，
h6，
p{
字体大小：正常；
}
.内联列表{
列表样式类型：无；
填充：0；
}
.inline list>li{
显示：内联块；
}
/* */
标题{
显示：块；
位置：相对位置；
排名：0；
左：0；
宽度：35%；
高度：100vh；
背景：#fff；
}
.个人资料{
显示：块；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
文本对齐：居中；
}
.阿凡达{
显示：内联块；
位置：相对位置；
宽度：80px；
高度：80px；
背景：url（“../img/avatar.jpg”）无重复中心；
背景尺寸：封面；
边界半径：100%；
}
.socialmedia>li{
填充：0 5px 0 0；
}
.socialmedia>li>a{
颜色：#212121；
}
/* */
主要{
显示：块；
位置：绝对位置；
排名：0；
右：0；
宽度：65%；
身高：100%；
背景：#EEEEEE；
}
.控制{
显示：块；
位置：绝对位置；
z指数：100000；
最高：50%；
转化：translateY（-50%）；
宽度：100%；
}
.控制{
显示：内联块；
位置：绝对位置；
宽度：36px；
高度：36px；
利润率：0.20px 0.20px；
背景:#f5；
颜色：#212121；
边界半径：100%；
光标：指针；
}
.向后{
左：0；
浮动：左；
文本对齐：居中；
}
.向后箭头{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：18px；
高度：18px；
背景：url（“../img/icon/left chevron.svg”）无重复中心；
背景尺寸：封面；
颜色：#212121；
}
.前进箭头{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：18px；
高度：18px；
背景：url（“../img/icon/right chevron.svg”）无重复中心；
背景尺寸：封面；
颜色：#212121；
}
.转发{
右：0；
浮动：对；
}
.项目{
显示：块；
位置：相对位置；
宽度：100%；
高度：100vh；
}
.项目{
显示：无；
位置：绝对位置；
宽度：100%；
高度：100vh；
}
.狗{
背景：红色；
}
猫先生{
背景：绿色；
}
兔子先生{
背景：蓝色；
}
/* */
页脚{
显示：块；
位置：相对位置；
底部：0；
填充：0；
宽度：100%；
高度：36px；
背景：#fff；
}
.制造{
显示：内联块；
位置：绝对位置；
浮动：左；
左：0；
最高：50%；
高度：38px；
转化：translateY（-50%）；
}
.made>p{
显示：内联块；
}
.法律{
显示：内联块；
位置：绝对位置；
浮动：对；
右：0；
最高：50%；
高度：38px；
转化：translateY（-50%）；
}
/* */
.信封{
显示：内联块；
位置：相对位置；
宽度：18px；
高度：18px；
背景：url（“../img/icon/envelope.svg”）无重复中心；
背景尺寸：封面；
}
.推特{
显示：内联块；
位置：相对位置；
宽度：18px；
高度：18px；
背景：url（“../img/icon/brands/twitter.svg”）无重复中心；
背景尺寸：封面；
}
.运球{
显示：内联块；
位置：相对位置；
宽度：18px；
高度：18px；
背景：url（“../img/icon/brands/dribble.svg”）无重复中心；
背景尺寸：封面；
}
github先生{
显示：内联块；
位置：相对位置；
宽度：18px；
高度：18px；
背景：url（“../img/icon/brands/github.svg”）无重复中心；
背景尺寸：封面；
}

-
-
您的代码似乎是不必要的递归代码。每次单击箭头时，都会再次绑定单击处理程序。此外，如果单击“下一步”，则传递到
projectSlider
的对象仅包含一个项目元素，因此该对象中不会有“下一步”或“上一步”

我建议采用不同的方法。在我下面的示例中，每次单击都会隐藏相应的项目（基于数字索引），然后附加到项目容器（将其堆叠在其他容器之上），然后重新显示（用于动画目的）


功能刷新项目（项目持有者、项目、项目索引）{
项目索引=（项目索引+projects.length）%projects.length；
var thisProject=projects.eq（项目指数）；
thisProject.hide（）.appendTo（project_holder.show）（250）；
}
$（函数（）{
var项目持有人=$（'.projects'）；
var projects=project_holder.children（'.project'）；
var项目指数=0；
$（'.control next'）。单击（函数（）{
刷新项目（项目持有人、项目、++项目索引）；
});
$（'.control-previous'）。单击（函数（）{
更新项目（项目持有人，项目，--项目索引）；
});
});
正文{
填充：0；
保证金：0；
字体大小：10px；
}
主要{
位置：绝对位置；
排名：0；
右：0；
宽度：65%；
身高：100%；
背影