Ad

Bootstrap 4 Carousel: Make The Slides At The Left And Right Of The Active Slide Visible

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:

enter image description here

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 target="_blank" rel="nofollow noreferrer" 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" target="_blank" rel="nofollow noreferrer" 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" target="_blank" rel="nofollow noreferrer" 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" target="_blank" rel="nofollow noreferrer" href="#">See more</a>
          </p>
        </div>
      </div>
    </div>
    <a class="carousel-control carousel-control-prev" target="_blank" rel="nofollow noreferrer" 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" target="_blank" rel="nofollow noreferrer" 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?

Ad

Answer

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

Ad
source: stackoverflow.com
Ad