引导4旋转木马:使活动幻灯片的左边和右边的幻灯片可见

I am working on a full-screen Bootstrap 4 carousel. The slides contain not images, but videos and captions.

我正在开发一个全屏引导4旋转木马。幻灯片上没有图片，只有视频和字幕。

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:

我的目的是把幻灯片的标题放在活动幻灯片的左边和右边，在滑块控件上，给人以字幕被用作控件的印象。如下图所示:

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 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>

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?

默认情况下，引导4旋转木马需要这个工作。我怎样才能在展示它们的同时还让旋转木马发挥作用呢?

5 个解决方案

#1

Demo :

Full page : https://codepen.io/devanshj/full/MXXdvO/

整个页面:https://codepen.io/devanshj/full/MXXdvO/。

With code : https://codepen.io/devanshj/pen/MXXdvO

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

Explanation :

1. Used flickity. Because it handles the difficult things for us.

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

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

   默认情况下。content位于中心。为了将幻灯片内容移动到选定的幻灯片附近，添加:translateX(calc(100vw-100%)/2 + 5vw)*-1和translateX(calc(100vw-100%)/2 + 5vw)到next，并对pre - v幻灯片进行响应

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

   为flickity添加了一个事件处理程序。按比例向所选择的幻灯片添加边距左边的滚动，以便.content最终返回到原始(中心)位置

PS: I have kept autoplay on video but it doesn't work. Maybe because of being inside an iframe

PS:我一直在录像里自动播放，但是没有效果。可能是因为在iframe中

#2

You can use "flickity" jquery slider for your desired output, see an example below:

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

Link for the jquery plugin: flickity

jquery插件的链接:flickity

#3

Add an id for the page wrapper and initialize it.

为页面包装器添加一个id并初始化它。

$('#page-wrapper').carousel();

demo

演示

#4

If you want to ads caption of right and left slide as controls of slider you can copy content of captions of left and right slides to left and right controls using jquery see code below i have added some css for display content properly, you can add your css

如果你想将左右滑动条的标题作为滑动条的控件进行广告，你可以使用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>

#5

Added the following styles div

添加了以下样式div

No changes required in JS

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>