it-roy-ru.com

Карусель Bootstrap 4: сделайте слайды слева и справа от активного слайда видимыми

Я работаю над полноэкранной каруселью Bootstrap 4. Слайды содержат не изображения, а videos и подписи. 

Мое намерение состоит в том, чтобы поместить заголовки слайдов слева и справа от активного слайда поверх элементов управления слайдера, чтобы создать впечатление, что заголовки используются в качестве элементов управления. Иллюстрация желаемого эффекта можно увидеть ниже:

 enter image description here

Чтобы достичь своей цели, я написал следующий код:

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>

(Очевидная) проблема заключается в том, что слайды слева и справа от активного слайда имеют display: none;, поэтому их подписи не видны.

По умолчанию Карусель Bootstrap 4 нуждается в этом для работы. Как я могу их отобразить и при этом оставить карусель работать?

3
Razvan Zamfir

Демо:

Полная страница: 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: я сохранил autoplay на video, но он не работает. Может быть из-за нахождения внутри iframe

1
Devansh J

Вы можете использовать слайдер jquery "flickity" для желаемого результата, см. Пример ниже:

$('#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/[email protected]/dist/flickity.min.css">
<!-- JavaScript -->
<script src="https://unpkg.com/[email protected]/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

1
Nidhi

Если вы хотите добавить заголовки правого и левого слайдов в качестве элементов управления слайдера, вы можете скопировать содержимое титров левого и правого слайдов в левый и правый элементы управления, используя 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>

0
Nidhi

Добавлены следующие стили 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>

0
Nandita Sharma