Javascript 引导4转盘：使活动幻灯片左右两侧的幻灯片可见

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

我的意图是将幻灯片的标题放在活动幻灯片的左侧和右侧，在滑块控件上，给人一种将标题用作控件的印象。下面可以看到所需效果的图示：

为了实现我的目标，我编写了以下代码：

var slider=$（'full#u slider'）；
var slidesNo=slider.find（'.carousel项'）.length；
var FULLSLIDERNAVIATION=函数（索引）{
var slide=slider.find（'.carousel项'）.eq（索引）；
if（slide.is（“：first child”））{
var slidePrev=slider.find（'.carousel项'）.eq（slidesNo-1）；
}否则{
var slidePrev=slider.find（'.carousel项'）.eq（索引-1）；
}
if（slide.is（“：last child”））{
var slideNext=slider.find（'.carousel项'）.eq（0）；
}否则{
var slideNext=slider.find（'.carousel项'）.eq（索引+1）；
}
$（'.carousel item'）.removeClass（'right-slide-left-slide'）；
slideNext.addClass（'right-slide'）；
slidePrev.addClass（“左幻灯片”）；
}
$（文档）.ready（函数（）{
全寿命（0）；
$（slider）.on（'slide.bs.carousel'，函数（事件）{
var index=$（event.relatedTarget）.index（）；
全寿命（指数）；
});
});
#全滑条{
位置：相对位置；
调整内容：灵活启动；
对齐项目：居中；
}
#完整滑动条。转盘项目{
位置：相对位置；
高度：100vh；
证明内容：中心；
对齐项目：居中；
}
#完整滑动条。旋转项目。视频标题{
位置：绝对位置；
左：0；
最高：50%；
过渡：所有500ms；
转化：translateX（-60px）translateY（-50%）；
宽度：100%；
最大宽度：600px；
颜色：#fff；
}
#完整滑动条。转盘项目。所有案例{
字号：18px；
页边顶部：自动；
显示：无；
}
#完整滑动条。旋转项目。所有案例a{
颜色：#fff；
}
#完整滑动条。转盘项目。活动，
#完整滑动条。左侧旋转项目，
#完整滑动条。旋转项目右侧{
显示：flex！重要；
}
#完整滑动条。旋转项目。活动。视频标题{
左：50%；
转化：translateX（-50%）translateY（-50%）；
}
#完整滑动条。转盘项目。活动。所有案例{
显示：块；
}
#全滑块视频{
位置：绝对位置；
左：0；
排名：0；
宽度：100vw；
高度：自动；
z指数：-1；
}
#全滑盖h3{
字号：900；
字体大小：100px；
}
#全滑动控制{
显示：块；
文本对齐：居中；
字号：900；
字体大小：100px；
溢出：隐藏；
}

同侧阴唇


坠入爱河


coffe


如果您想将左右幻灯片的标题作为滑块控件进行广告，您可以使用jquery将左右幻灯片标题的内容复制到左右控件。请参见下面的代码。我已经添加了一些css用于正确显示内容，您可以添加css


var slider=$（'full#u slider'）；
var slidesNo=slider.find（'.carousel项'）.length；
var FULLSLIDERNAVIATION=函数（索引）{
var slide=slider.find（'.carousel项'）.eq（索引）；
if（slide.is（“：first child”））{
var slidePrev=slider.find（'.carousel项'）.eq（slidesNo-1）；
}否则{
var slidePrev=slider.find（'.carousel项'）.eq（索引-1）；
}
if（slide.is（“：last child”））{
var slideNext=slider.find（'.carousel项'）.eq（0）；
}否则{
var slideNext=slider.find（'.carousel项'）.eq（索引+1）；
}
$（'.carousel item'）.removeClass（'right-slide-left-slide'）；
slideNext.addClass（'right-slide'）；
slidePrev.addClass（“左幻灯片”）；
$（'.carousel control next'）.html（slideNext.find（'.video caption'）.html（））；
$（'.carousel control prev'）.html（slidePrev.find（'.video caption'）.html（））；
}
$（文档）.ready（函数（）{
全寿命（0）；
$（slider）.on（'slide.bs.carousel'，函数（事件）{
var index=$（event.relatedTarget）.index（）；
全寿命（指数）；
});
});
#全滑条{
位置：相对位置；
调整内容：灵活启动；
对齐项目：居中；
}
#完整滑动条。转盘项目{
位置：相对位置；
高度：100vh；
证明内容：中心；
对齐项目：居中；
}
#完整滑动条。旋转项目。视频标题{
位置：绝对位置；
左：0；
最高：50%；
过渡：所有500ms；
转化：translateX（-60px）translateY（-50%）；
宽度：100%；
最大宽度：600px；
颜色：#fff；
}
#完整滑动条。转盘项目。所有案例{
字号：18px；
页边顶部：自动；
显示：无；
}
#完整滑动条。旋转项目。所有案例a{
颜色：#fff；
}
#全滑块视频{
位置：绝对位置；
左：0；
排名：0；
宽度：100vw；
高度：自动；
z指数：-1；
}
#全滑盖h3{
字号：900；
字体大小：100px；
}
#完全滑动。旋转木马控制h3{
字号：18px；
显示：块；
}
#全滑动条。转盘控制p{
字体大小：14px；
显示：块；
}

关于我们


同侧阴唇


坠入爱河


coffe


处理危险


您可以使用“flickity”jquery滑块进行所需的输出
#full_slider .carousel-item.left-slide,
#full_slider .carousel-item.right-slide {
  position: absolute;
  top: 0;
  display: block;
}

#full_slider .carousel-item.left-slide {
  z-index: 2;
  left: -90%;
  overflow: hidden;
}

#full_slider .carousel-item.active {
  width: 100%;
  z-index: 1;
}

#full_slider .carousel-item.right-slide {
  z-index: 2;
  right: -90%;
}

#full_slider .carousel-item.left-slide video,
#full_slider .carousel-item.right-slide video {
  display: none;
}

.carousel-control-next,
.carousel-control-prev {
  z-index: 5;
}

#full_slider .carousel-item.left-slide .video-caption {
  right: 0;
  left: auto;
  text-align: right;
}

#full_slider .carousel-item.left-slide .video-caption,
#full_slider .carousel-item.right-slide .video-caption {
  transform: translate(0, -50%);
}