I have a unique challenge ahead as I am creating a full-screen Bootstrap 4 carousel that features videos instead of traditional images, accompanied by caption overlays.
My vision for this project is to position the captions on the left and right sides of the active slide, overlaying the slider controls so that they appear to be integrated into the navigation. This desired effect can be visualized in the illustration below:
https://i.sstatic.net/wfHpa.png
To implement this concept, I've developed the following code snippet:
var slider = $('#full_slider');
var slidesNo = slider.find('.carousel-item').length;
var fullSliderNavigation = function(index) {
var slide = slider.find('.carousel-item').eq(index);
if (slide.is(':first-child')) {
var slidePrev = slider.find('.carousel-item').eq(slidesNo - 1);
} else {
var slidePrev = slider.find('.carousel-item').eq(index - 1);
}
if (slide.is(':last-child')) {
var slideNext = slider.find('.carousel-item').eq(0);
} else {
var slideNext = slider.find('.carousel-item').eq(index + 1);
}
$('.carousel-item').removeClass('right-slide left-slide');
slideNext.addClass('right-slide');
slidePrev.addClass('left-slide');
}
$(document).ready(function() {
fullSliderNavigation(0);
$(slider).on('slide.bs.carousel', function(event) {
var index = $(event.relatedTarget).index();
fullSliderNavigation(index);
});
});#full_slider {
position: relative;
justify-content: flex-start;
align-items: center;
}
#full_slider .carousel-item {
position: relative;
height: 100vh;
justify-content: center;
align-items: center;
}
#full_slider .carousel-item .video-caption {
position: absolute;
left: 0;
top: 50%;
transition: all 500ms;
transform: translateX(-60px) translateY(-50%);
width: 100%;
max-width: 600px;
color: #fff;
}
#full_slider .carousel-item .allcases {
font-size: 18px;
margin-top: auto;
display: none;
}
#full_slider .carousel-item.active,
#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;
}<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">
<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>
<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>A notable hurdle I've encountered is that due to certain CSS properties set to display: none; on the slides adjacent to the active one, their captions remain invisible.
This behaviour is intrinsic to how Bootstrap 4 carousels typically function. What approach should I take to reveal these captions without impeding the functionality of the carousel?