title: Bootstrap 4 carousel: make the slides at the left and right of the active slide visible
body: <p>I am working on a full-screen Bootstrap 4 carousel. The slides contain not images, but <em>videos</em> and captions. </p>
  
  <p>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 <em>as controls</em>. An illustration of the desired effect can be seen below:</p>
  
  <p><a href="https://i.stack.imgur.com/wfHpa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wfHpa.png" alt="enter image description here"></a></p>
  
  <p>To achieve my goal, I have written the following code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><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);
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;div class="page-wrapper"&gt;
    &lt;div id="full_slider" class="carousel slide" data-ride="carousel" data-interval="false"&gt;
      &lt;div class="carousel-inner" role="listbox"&gt;
        &lt;div class="carousel-item"&gt;
          &lt;video src="https://code-love.tk/video/flamenco.mp4" autoplay loop muted&gt;&lt;/video&gt;
          &lt;div class="video-caption"&gt;
            &lt;h3 class="capt text-boldest"&gt;Lorem ipsum dolor&lt;/h3&gt;
            &lt;p class="allcases"&gt;
              &lt;a class="inherit" href="#"&gt;See more&lt;/a&gt;
            &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="carousel-item"&gt;
          &lt;video src="https://code-love.tk/video/protest.mp4" autoplay loop muted&gt;&lt;/video&gt;
          &lt;div class="video-caption"&gt;
            &lt;h3 class="capt text-boldest"&gt;Falling in love&lt;/h3&gt;
            &lt;p class="allcases"&gt;
              &lt;a class="inherit" href="#"&gt;See more&lt;/a&gt;
            &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="carousel-item"&gt;
          &lt;video src="https://code-love.tk/video/commerciala.mp4" autoplay loop muted&gt;&lt;/video&gt;
          &lt;div class="video-caption"&gt;
            &lt;h3 class="capt text-boldest"&gt;Coffe&lt;/h3&gt;
            &lt;p class="allcases"&gt;
              &lt;a class="inherit" href="#"&gt;See more&lt;/a&gt;
            &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;a class="carousel-control carousel-control-prev" href="#full_slider" role="button" data-slide="prev"&gt;
    &lt;span class="control text-left"&gt;&lt;/span&gt;
    &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
      &lt;/a&gt;
      &lt;a class="carousel-control carousel-control-next" href="#full_slider" role="button" data-slide="next"&gt;
    &lt;span class="control text-left"&gt;&lt;/span&gt;
    &lt;span class="sr-only"&gt;Next&lt;/span&gt;
     &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The (obvious) problem here is that the slides at the left and right of the active slide have <code>display: none;</code> so <em>their captions are not visible</em>.</p>
  
  <p>By default, the Bootstrap 4 carousel needs this to work. How can I display them and still let the carousel work?</p>