Bootstrap 4 carousel：使活動幻燈片左右兩側的幻燈片可見

Question

我正在制作全屏 Bootstrap 4 輪播。 幻燈片不包含圖像，而是包含視頻和標題。

我的目的是將幻燈片的標題放在活動幻燈片的左側和右側，在滑塊控件上，給人一種將標題用作控件的印象。 可以在下面看到所需效果的說明：

為了實現我的目標，我編寫了以下代碼：

 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>

這里的（明顯的）問題是活動幻燈片左側和右側的幻燈片display: none; 所以他們的標題是不可見的。

默認情況下，Bootstrap 4 輪播需要它來工作。 我怎樣才能顯示它們並仍然讓輪播工作？

Answer 1

您可以使用“flickity”jquery 滑塊來獲得所需的輸出，請參見下面的示例：

 $('#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>

jquery 插件的鏈接： flickity

Answer 2

演示：

整頁： https : //codepen.io/devanshj/full/MXXdvO/

使用代碼： https : //codepen.io/devanshj/pen/MXXdvO

解釋 ：

1. 使用輕彈。 因為它為我們處理了困難的事情。

2. 默認情況下.content位於中心。 要移動所選幻燈片旁邊的幻燈片內容，添加： translateX(calc( (100vw-100%)/2 + 5vw )*-1)和translateX(calc( (100vw-100%)/2 + 5vw ))到下一個和上一張幻燈片

3. 為flickity.scroll添加了一個事件處理程序，該處理程序與所選幻燈片的移動量成比例地添加marginLeft ，以便.content最終返回到原始（中心）位置

PS：我一直在video autoplay ，但它不起作用。 也許是因為在iframe

Answer 3

如果您想將左右幻燈片的標題廣告作為滑塊的控件，您可以使用 jquery 將左右幻燈片的標題內容復制到左右控件，請參閱下面的代碼我已經添加了一些正確顯示內容的 css，您可以添加您的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

添加了以下樣式div

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>