javascript - Bootstrap 4 轮播 : make the slides at the left and right of the active slide visible

Question

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

我的目的是将幻灯片的标题放在事件幻灯片的左侧和右侧，在 slider 控件之上，给人以标题被用作控件的印象。所需效果的图示如下所示:

为了实现我的目标，我编写了以下代码:

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; 所以它们的标题不可见。 p>

默认情况下，Bootstrap 4 轮播需要这个才能工作。我怎样才能显示它们并让轮播继续工作？

Answer 1

演示:

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

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

解释:

1. 二手 flickity .因为它为我们处理了困难的事情。

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

3. 为 flickity.scroll 添加了一个事件处理程序，它根据所选幻灯片的移动量按比例添加 marginLeft，以便 .content 终于回到原来的(中心)位置

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

中