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

Posted

技术标签:

【中文标题】Bootstrap 4轮播：使活动幻灯片左右两侧的幻灯片可见【英文标题】：Bootstrap 4 carousel: make the slides at the left and right of the active slide visible 【发布时间】：2018-11-25 22:50:06 【问题描述】：

我正在开发一个全屏 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 轮播需要此功能才能工作。如何在显示它们的同时让轮播继续工作？

【问题讨论】：

左右字幕可以像活动幻灯片的伪元素前后一样添加，滑块的默认控件是透明的，充当点击容器。 【参考方案1】：

演示：

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

带代码：https://codepen.io/devanshj/pen/MXXdvO

解释：

    使用flickity。因为它为我们处理了困难的事情。

    默认情况下.content 位于中心。要将幻灯片的内容移动到所选幻灯片附近，分别添加：translateX(calc( (100vw-100%)/2 + 5vw )*-1) 和 translateX(calc( (100vw-100%)/2 + 5vw )) 到下一张和上一张幻灯片

    为flickity.scroll 添加了一个事件处理程序，该处理程序将marginLeft 按比例添加到所选幻灯片的移动量，以便.content 最终返回到原始（中心）位置

    李>

PS：我在video 上保留了autoplay，但它不起作用。可能是因为在iframe

【讨论】：

很棒的代码，但是使用&lt;div class="item is-before-selected" aria-selected="false"&gt; 元素作为上一个按钮呢？我已经实现了，上一个按钮不起作用。 这行不通，因为.item 没有被移动，只有.content 被移动到选定的幻灯片。所以你必须在.content而不是.item上收听点击事件。此外，我对使用单独的 prev 和 next 按钮感觉很好。也感谢您的赞赏！ 更正：.content h1 而不是 .content flickity 插件是否有鼠标滚轮前进选项？ No flickity 不提供这样的选项......但显然你可以为这种行为编写自己的代码......他们有很好的 api......通过答案中的链接查看...【参考方案2】：

您可以使用“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

【讨论】：

【参考方案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>

【讨论】：

复制不符合我的设计需求，因为我需要字幕流畅地滑动与幻灯片。 欢迎使用替代轮播插件。哪个最适合这份工作？ 你能举一个你所说的功能的实际例子吗？ 我已经为你添加了另一个答案，请检查【参考方案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>

【讨论】：

很好的答案。尽管如此，还是有一个问题：活动幻灯片不再是 100% 宽。我正在尝试制作像 THIS ONE 这样的轮播。 现在请检查我的更新答案@RazvanZamfir 我已经按照您的意愿完成了 我不希望 .carousel-item.left-slide 和 .carousel-item.right-slide 元素被压扁（宽度为 10%）。我想要全宽和display:flex，并且我希望轮播在这种情况下工作，这样我就可以依赖 CSS 来制作动画，比如 HERE。 它们不再是 10% 的宽度。请检查我的更新答案 但是.carousel-item.left-slide 和.carousel-item.right-slide 元素现在被隐藏了，因此它们的标题也被隐藏了。 :(

以上是关于Bootstrap 4轮播：使活动幻灯片左右两侧的幻灯片可见的主要内容，如果未能解决你的问题，请参考以下文章

Bootstrap 4轮播上的hasClass不起作用

Bootstrap轮播使文本逐个字母出现

暂停和启动带有视频的幻灯片的 Bootstrap 4 轮播

echarts 媒体查询不适用于 Bootstrap（轮播）

如何在 Bootstrap 4 轮播中制作全角背景图像？

用于多项目显示的 Bootstrap 4 轮播包装问题