Javascript 自定义引导4全屏旋转木马错误：控件和标题之间的错误对应

我在一个全屏引导4旋转木马上工作。幻灯片中不是图像，而是视频和字幕

我将上一张幻灯片和下一张幻灯片的标题作为控件，而不是“经典”箭头

为此，我将一些定制CSS和jQuery放在一起

我的脚本工作不正常：右侧控件的内容不是下一张幻灯片的标题；左侧控件的内容不是上一张幻灯片的标题

var fullslidernaviation=function（）{
变量滑块=$（“#满滑块”），
slide=slider.find（'.carousel项'），
ctrlNext=slider.find（'[data slide=“next”]>span'），
ctrlPrev=slider.find（'[data slide=“prev”]>span'）；
幻灯片。每个功能（索引）{
if（$（this）.hasClass（“活动”））{
var ctrlNextVal=$（this.next（）.find（'.capt'）.text（），
ctrlPrevVal=$（this.prev（）.find（'.capt'）.text（）；
ctrlNext.text（ctrlNextVal）；
ctrlPrev.text（ctrlPrevVal）；
}
});
}
$（文档）.ready（函数（）{
如果（$（'#全滑动条'）。长度>0）{
充分的活力（）；
$（'.carousel控件'）。在（'click'，fullslidernaviation）上；
}
});
/*滑块主页*/
#完整滑动条。转盘项目{
高度：100vh；
证明内容：中心；
对齐项目：居中；
}
#完整滑动条。转盘项目。活动{
显示：flex！重要；
位置：相对位置；
}
#完整滑动条。左侧旋转项目，
#完整滑动条。旋转项目右侧{
显示：flex！重要；
}
#全滑块视频{
位置：绝对位置；
左：0；
排名：0；
宽度：100vw；
高度：自动；
z指数：-1；
}
#完整的滑动条。视频标题{
最大宽度：595px；
颜色：#fff；
}
#全滑盖h3{
字号：900；
字体大小：100px；
}
#全滑动控制{
显示：块；
文本对齐：居中；
字号：900；
字体大小：100px；
宽度：40px；
高度：120px；
线高：120px；
溢出：隐藏；
}
#完全滑动。下一步旋转控制{
证明内容：柔性端；
}
#完全滑动。转盘控制上一个{
调整内容：灵活启动；
}
.所有情况{
字号：18px；
页边顶部：自动；
}
.所有案例a{
颜色：#fff；
}

关于我们


同侧阴唇


坠入爱河


coffe


处理危险


您的JavaScript有两个问题：

如果您在第一张幻灯片上，
prev（）
将找不到项目。最后一张幻灯片也是如此，您将找不到
next（）
项
似乎在触发onclick事件时，带有class.active的幻灯片并不是您所期望的新幻灯片/即将发布的幻灯片，而是旧幻灯片，它在您单击next/prev元素之前处于活动状态
请参阅我的代码片段示例，其中我只编辑了上述版本的JavaScript：我使用2个if条件来处理第一个和最后一个元素。我还使用了由引导转盘单独触发的事件，而不是自定义的单击事件来获得正确的活动项


var slider=$（'full#u slider'）；
var FULLSLIDERNAVIATION=函数（索引）{
var slide=slider.find（'.carousel项'）.eq（索引）；
if（slide.is（“：first child”））{
var ctrlPrevVal=slide.sibbines（“：last”）.find（“.capt”）.text（）；
}否则{
var ctrlPrevVal=slide.prev（）.find（'.capt'）.text（）；
}
if（slide.is（“：last child”））{
var ctrlNextVal=slide.sides（“：first”）.find（“.capt”）.text（）；
}否则{
var ctrlNextVal=slide.next（）.find（'.capt'）.text（）；
}
var ctrlNext=slider.find（'[data slide=“next”]>span'）；
var ctrlPrev=slider.find（'[data slide=“prev”]>span'）；
ctrlNext.text（ctrlNextVal）；
ctrlPrev.text（ctrlPrevVal）；
}
$（文档）.ready（函数（）{
全寿命（0）；
$（slider）.on（'slide.bs.carousel'，函数（事件）{
var index=$（event.relatedTarget）.index（）；
全寿命（指数）；
});
});
/*滑块主页*/
#完整滑动条。转盘项目{
高度：100vh；
证明内容：中心；
对齐项目：居中；
}
#完整滑动条。转盘项目。活动{
显示：flex！重要；
位置：相对位置；
}
#完整滑动条。左侧旋转项目，
#完整滑动条。旋转项目右侧{
显示：flex！重要；
}
#全滑块视频{
位置：绝对位置；
左：0；
排名：0；
宽度：100vw；
高度：自动；
z指数：-1；
}
#完整的滑动条。视频标题{
最大宽度：595px；
颜色：#fff；
}
#全滑盖h3{
字号：900；
字体大小：100px；
}
#全滑动控制{
显示：块；
文本对齐：居中；
字号：900；
字体大小：100px；
宽度：40px；
高度：120px；
线高：120px；
溢出：隐藏；
}
#完全滑动。下一步旋转控制{
证明内容：柔性端；
}
#完全滑动。转盘控制上一个{
调整内容：灵活启动；
}
.所有情况{
字号：18px；
页边顶部：自动；
}
.所有案例a{
颜色：#fff；
}

关于我们


同侧阴唇


坠入爱河