Bootstrap 4 carousel：使活动幻灯片左右两侧的幻灯片可见

Question

I am working on a full-screen Bootstrap 4 carousel. The slides contain not images, but videos and captions.

My intention is to lay the captions of the slides at the left and right of the active slide, over the slider controls, to give the impression that the captions are used as controls . An illustration of the desired effect can be seen below:

To achieve my goal, I have written the following code:

 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 .allcases a { color: #fff; } #full_slider .carousel-item.active, #full_slider .carousel-item-left, #full_slider .carousel-item-right { display: flex !important; } #full_slider .carousel-item.active .video-caption { left: 50%; transform: translateX(-50%) translateY(-50%); } #full_slider .carousel-item.active .allcases { display: block; } #full_slider video { position: absolute; left: 0; top: 0; width: 100vw; height: auto; z-index: -1; } #full_slider h3 { font-weight: 900; font-size: 100px; } #full_slider .control { display: block; text-align: center; font-weight: 900; font-size: 100px; overflow: hidden; }

 <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>

The (obvious) problem here is that the slides at the left and right of the active slide have display: none; so their captions are not visible .

By default, the Bootstrap 4 carousel needs this to work. How can I display them and still let the carousel work?

Answer 1

You can use "flickity" jquery slider for your desired output, see an example below:

 $('#full_slider').flickity({ wrapAround: true, on: { ready: function() { $('.carousel-cell:first-child()').find('video').get(0).play(); }, change: function( index ) { $('.is-selected').find('video').get(0).play(); } } });

 #full_slider .slide-content { position: relative; height: 100vh; width: 70vw; justify-content: center; align-items: center; } #full_slider .slide-content .video-caption { position: absolute; left: 50%; top: 50%; transition: all 500ms; transform: translate(-50%, -50%); width: 100%; max-width: 600px; color: #fff; } #full_slider .slide-content .allcases { font-size: 18px; margin-top: auto; display: none; } #full_slider .slide-content .allcases a { color: #fff; } #full_slider video { position: absolute; left: 50%; top: 50%; width: 100%; height: auto; z-index: -1; transform: translate(-50%, -50%); } #full_slider h3 { font-weight: 900; font-size: 100px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- CSS --> <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css"> <!-- JavaScript --> <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script> <div class="page-wrapper"> <div class="main-carousel" id="full_slider"> <div class="carousel-cell is-selected"> <div class="slide-content"> <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="#">See more</a> </p> </div> </div> </div> <div class="carousel-cell"> <div class="slide-content"> <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> <div class="carousel-cell"> <div class="slide-content"> <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> <div class="carousel-cell"> <div class="slide-content"> <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> <div class="carousel-cell"> <div class="slide-content"> <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> </div> </div>

Link for the jquery plugin: flickity

Answer 2

Demo :

Full page : https://codepen.io/devanshj/full/MXXdvO/

With code : https://codepen.io/devanshj/pen/MXXdvO

Explanation :

1. Used flickity . Because it handles the difficult things for us.

2. By default .content is in center. To move content of slides adjacent to selected slide, Added : translateX(calc( (100vw-100%)/2 + 5vw )*-1) and translateX(calc( (100vw-100%)/2 + 5vw )) to next and prev slides repectively

3. Added an event handler for flickity.scroll that adds marginLeft proportionately to the amount be which selected slide is moved so that .content comes back to the original (center) position finally

PS: I have kept autoplay on video but it doesn't work. Maybe because of being inside an iframe

Answer 3

If you want to ads caption of right and left slide as controls of slider you can copy content of captions of left and right slides to left and right controls using jquery see code below i have added some css for display content properly, you can add your css

 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'); $('.carousel-control-next').html(slideNext.find('.video-caption').html()); $('.carousel-control-prev').html(slidePrev.find('.video-caption').html()); } $(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 .allcases a { color: #fff; } #full_slider video { position: absolute; left: 0; top: 0; width: 100vw; height: auto; z-index: -1; } #full_slider h3 { font-weight: 900; font-size: 100px; } #full_slider .carousel-control h3 { font-size: 18px; display:block; } #full_slider .carousel-control p { font-size: 14px; display:block; }

 <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> </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"> </a> <a class="carousel-control carousel-control-next" href="#full_slider" role="button" data-slide="next"> </a> </div> </div>

Answer 4

Added the following styles div

No changes required in JS

#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%);
}

 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 .allcases a { color: #fff; } #full_slider .carousel-item.active, #full_slider .carousel-item-left, #full_slider .carousel-item-right { display: flex !important; } #full_slider .carousel-item.active .video-caption { left: 50%; transform: translateX(-50%) translateY(-50%); } #full_slider .carousel-item.active .allcases { display: block; } #full_slider video { position: absolute; left: 0; top: 0; width: 100vw; height: auto; z-index: -1; } #full_slider h3 { font-weight: 900; font-size: 100px; } #full_slider .control { display: block; text-align: center; font-weight: 900; font-size: 100px; overflow: hidden; } #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%); }

 <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> </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>

 var slider = $('#full_slider'); var slidesNo = slider.find('.carousel-item').length; var fullSliderNavigation = function(index) { var slide = slider.find('.carousel-item').eq(index); var slidePrev, slideNext; if (slide.is(':first-child')) { slidePrev = slider.find('.carousel-item').eq(slidesNo - 1); } else { slidePrev = slider.find('.carousel-item').eq(index - 1); } if (slide.is(':last-child')) { slideNext = slider.find('.carousel-item').eq(0); } else { 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); }); });

 .carousel-item { position: relative; } .carousel-item .video-caption, .carousel-item .allcases { position: absolute; top: 50%; left: 25%; transform: translate(-25%, -50%); color: white; } .carousel-item .allcases { top: 60%; left: 25%; transform: translate(-25%, -60%); } .carousel-item .video-caption h3 { font-size: 100px; } .carousel-item video { width: 100%; height: 100%; } .carousel-inner { position: relative; } .carousel-item::before { content: attr(data-left); left: -90%; text-align: right; } .carousel-item::after { content: attr(data-right); right: -90%; text-align: left; } .carousel-item::before, .carousel-item::after { position: absolute; top: 50%; transform: translateY(-50%); color: white; font-size: 100px; font-weight: 500; width: 100%; }

 <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> <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 id="full_slider" class="carousel slide" data-ride="carousel" data-interval="false"> <div class="carousel-inner"> <div class="carousel-item active" data-left="Dealing with danger" data-right="Lorem ipsum dolor"> <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> </div> <p class="allcases"> <a class="inherit" href="#">Lorem ipsum dolor</a> </p> </div> <div class="carousel-item" data-left="All about us" data-right="Falling in love"> <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> </div> <p class="allcases"> <a class="inherit" href="#">See more</a> </p> </div> <div class="carousel-item" data-left="Lorem ipsum dolor" data-right="Coffe"> <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> </div> <p class="allcases"> <a class="inherit" href="#">See more</a> </p> </div> <div class="carousel-item" data-left="Falling in love" data-right="Dealing with danger"> <video src="https://code-love.tk/video/commerciala.mp4" autoplay loop muted></video> <div class="video-caption"> <h3 class="capt text-boldest">Coffe</h3> </div> <p class="allcases"> <a class="inherit" href="#">See more</a> </p> </div> <div class="carousel-item" data-left="Coffe" data-right="All about us"> <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> </div> <p class="allcases"> <a class="inherit" href="#">See more</a> </p> </div> </div> <a class="carousel-control carousel-control-prev" href="#full_slider" role="button" data-slide="prev"> <span class="control text-left"></span> </a> <a class="carousel-control carousel-control-next" href="#full_slider" role="button" data-slide="next"> <span class="control text-left"></span> </a> </div>