自定义引导程序 4 全屏轮播错误:控件和标题之间的对应错误

Question

我正在制作全屏 Bootstrap 4 轮播。幻灯片包含的不是图像，而是视频和标题。

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

为此，我整理了一些自定义CSS和jQuery。

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

var fullSliderNavigation = function() {
var slider = $('#full_slider'),
slide = slider.find('.carousel-item'),
ctrlNext = slider.find('[data-slide="next"] > span'),
ctrlPrev = slider.find('[data-slide="prev"] > span');
slide.each(function(index) {
if ($(this).hasClass("active")) {
var ctrlNextVal = $(this).next().find('.capt').text(),
ctrlPrevVal = $(this).prev().find('.capt').text();
ctrlNext.text(ctrlNextVal);
ctrlPrev.text(ctrlPrevVal);
}
});
}
$(document).ready(function() {
if ($('#full_slider').length > 0) {
fullSliderNavigation();
$('.carousel-control').on('click', fullSliderNavigation);
}

});

/* Slider homepage */
#full_slider .carousel-item {
height: 100vh;
justify-content: center;
align-items: center;
}
#full_slider .carousel-item.active {
display: flex !important;
position: relative;
}
#full_slider .carousel-item-left,
#full_slider .carousel-item-right {
display: flex !important;
}
#full_slider video {
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: auto;
z-index: -1;
}
#full_slider .video-caption {
max-width: 595px;
color: #fff;
}
#full_slider h3 {
font-weight: 900;
font-size: 100px;
}
#full_slider .control {
display: block;
text-align: center;
font-weight: 900;
font-size: 100px;
width: 40px;
height: 120px;
line-height: 120px;
overflow: hidden;
}
#full_slider .carousel-control-next {
justify-content: flex-end;
}
#full_slider .carousel-control-prev {
justify-content: flex-start;
}
.allcases {
font-size: 18px;
margin-top: auto;
}
.allcases a {
color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="page-wrapper">
<div id="full_slider" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<video src="https://code-love.tk/video/koffee.mp4" autoplay loop muted></video>
<div class="video-caption">
<h3 class="capt text-boldest">All about us</h3>
<p class="allcases">
<a class="inherit" href="#"><a class="inherit" href="#">See more</a></a>
</p>
</div>
</div>
<div class="carousel-item">
<video src="//code-love.tk/video/flamenco.mp4" autoplay loop muted></video>
<div class="video-caption">
<h3 class="capt text-boldest">Lorem ipsum dolor</h3>
<p class="allcases">
<a class="inherit" href="#">See more</a>
</p>
</div>
</div>
<div class="carousel-item">
<video src="//code-love.tk/video/protest.mp4" autoplay loop muted></video>
<div class="video-caption">
<h3 class="capt text-boldest">Falling in love</h3>
<p class="allcases">
<a class="inherit" href="#">See more</a>
</p>
</div>
</div>
<div class="carousel-item">
<video src="//code-love.tk/video/koffe.mp4" autoplay loop muted></video>
<div class="video-caption">
<h3 class="capt text-boldest">Coffe</h3>
<p class="allcases">
<a class="inherit" href="#">See more</a>
</p>
</div>
</div>
<div class="carousel-item">
<video src="//code-love.tk/video/commerciala.mp4" autoplay loop muted></video>
<div class="video-caption">
<h3 class="capt text-boldest">Dealing with danger</h3>
<p class="allcases">
<a class="inherit" href="#">See more</a>
</p>
</div>
</div>
</div>
<a class="carousel-control carousel-control-prev" href="#full_slider" role="button" data-slide="prev">
	 <span class="control text-left"></span>
	 <span class="sr-only">Previous</span>
</a>
<a class="carousel-control carousel-control-next" href="#full_slider" role="button" data-slide="next">
	 <span class="control text-left"></span>
	 <span class="sr-only">Next</span>
</a>
</div>
</div>

我的错误在哪里？

Answer 1

JavaScript 有两个问题：

1. 如果您在第一张幻灯片上，prev()将找不到项目。最后一张幻灯片也是如此，您将找不到next()项目。
2. 似乎在触发 onclick 事件时，类为 .active 的幻灯片不是您期望的新/即将发布的幻灯片，而是旧的幻灯片，在您单击下一个/上一个元素之前，它处于活动状态。

请参阅我的片段示例，其中我只编辑了上述版本的 JavaScript：我使用 2 if 条件来处理第一个和最后一个元素。我还使用了由引导轮播自行触发的事件，而不是您的自定义点击事件来获得正确的活动项目。

var slider = $('#full_slider');
var fullSliderNavigation = function(index) {
var slide = slider.find('.carousel-item').eq(index);
if (slide.is(':first-child')) {
var ctrlPrevVal = slide.siblings(":last").find('.capt').text();
} else {
var ctrlPrevVal = slide.prev().find('.capt').text();
}
if (slide.is(':last-child')) {
var ctrlNextVal = slide.siblings(":first").find('.capt').text();
} else {
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);
}
$(document).ready(function() {
fullSliderNavigation(0);
$(slider).on('slide.bs.carousel', function (event) {
var index = $(event.relatedTarget).index();
fullSliderNavigation(index);
});
});

/* Slider homepage */
#full_slider .carousel-item {
height: 100vh;
justify-content: center;
align-items: center;
}
#full_slider .carousel-item.active {
display: flex !important;
position: relative;
}
#full_slider .carousel-item-left,
#full_slider .carousel-item-right {
display: flex !important;
}
#full_slider video {
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: auto;
z-index: -1;
}
#full_slider .video-caption {
max-width: 595px;
color: #fff;
}
#full_slider h3 {
font-weight: 900;
font-size: 100px;
}
#full_slider .control {
display: block;
text-align: center;
font-weight: 900;
font-size: 100px;
width: 40px;
height: 120px;
line-height: 120px;
overflow: hidden;
}
#full_slider .carousel-control-next {
justify-content: flex-end;
}
#full_slider .carousel-control-prev {
justify-content: flex-start;
}
.allcases {
font-size: 18px;
margin-top: auto;
}
.allcases a {
color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="page-wrapper">
<div id="full_slider" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<video src="https://code-love.tk/video/koffee.mp4" autoplay loop muted></video>
<div class="video-caption">
<h3 class="capt text-boldest">All about us</h3>
<p class="allcases">
<a class="inherit" href="#"><a class="inherit" href="#">See more</a></a>
</p>
</div>
</div>
<div class="carousel-item">
<video src="https://code-love.tk/video/flamenco.mp4" autoplay loop muted></video>
<div class="video-caption">
<h3 class="capt text-boldest">Lorem ipsum dolor</h3>
<p class="allcases">
<a class="inherit" href="#">See more</a>
</p>
</div>
</div>
<div class="carousel-item">
<video src="https://code-love.tk/video/protest.mp4" autoplay loop muted></video>
<div class="video-caption">
<h3 class="capt text-boldest">Falling in love</h3>
<p class="allcases">
<a class="inherit" href="#">See more</a>
</p>
</div>
</div>
<div class="carousel-item">
<video src="https://code-love.tk/video/commerciala.mp4" autoplay loop muted></video>
<div class="video-caption">
<h3 class="capt text-boldest">Coffe</h3>
<p class="allcases">
<a class="inherit" href="#">See more</a>
</p>
</div>
</div>
<div class="carousel-item">
<video src="https://code-love.tk/video/commerciala.mp4" autoplay loop muted></video>
<div class="video-caption">
<h3 class="capt text-boldest">Dealing with danger</h3>
<p class="allcases">
<a class="inherit" href="#">See more</a>
</p>
</div>
</div>
</div>
<a class="carousel-control carousel-control-prev" href="#full_slider" role="button" data-slide="prev">
	 <span class="control text-left"></span>
	 <span class="sr-only">Previous</span>
</a>
<a class="carousel-control carousel-control-next" href="#full_slider" role="button" data-slide="next">
	 <span class="control text-left"></span>
	 <span class="sr-only">Next</span>
</a>
</div>
</div>