javascript - Bootstrap 4 carousel: make the slides at the left and right of the active slide visible - Stack Overflow-软件玩家

admin管理员组
文章数量:1401798

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:

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=".1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src=".3.1/jquery.min.js"></script>
<script src=".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=".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=".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=".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>

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

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./bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./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/merciala.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>

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?

Share Improve this question edited Nov 26, 2019 at 12:26 asked Jun 16, 2018 at 9:27 Razvan Zamfir 4,7107 gold badges49 silver badges284 bronze badges

The left and right captions can be added as before and after pseudo elements of the active slide and default controls of the slider to be transparent and act as click containers. – August Commented Jun 20, 2018 at 13:56

Add a ment |

4 Answers 4

Sorted by: Reset to default 1 +50

Demo :

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

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

Explanation :

Used flickity. Because it handles the difficult things for us.
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
Added an event handler for flickity.scroll that adds marginLeft proportionately to the amount be which selected slide is moved so that .content es 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

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

$('#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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg./flickity@2/dist/flickity.min.css">
<!-- JavaScript -->
<script src="https://unpkg./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/merciala.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/merciala.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

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

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./bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./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/merciala.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/merciala.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>

Added the following styles div

No changes required in 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./bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./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/merciala.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/merciala.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./bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./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/merciala.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/merciala.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>

本文标签：

版权声明：本文标题：javascript - Bootstrap 4 carousel: make the slides at the left and right of the active slide visible - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1744313495a2600145.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

javascript - Bootstrap 4 carousel: make the slides at the left and right of the active slide visible - Stack Overflow

4 Answers 4

Demo :

Explanation :

更多相关文章

javascript - combine html template files into one JS file - Stack Overflow

angular - primeNG tree select value - Stack Overflow

wp admin - Disable the administration email address verification (new in 5.3)

visual studio code - Jupyter notebook in VSCode does not see .venv kernel - Stack Overflow

java - How to correctly implement jOOQ&#39;s Binding to render an alternative PostgreSQL interval bind value syntax - Stack

Ruby on rails no method error controller home - Stack Overflow

javascript - jQuery: Global Variable Namespace Problem - Stack Overflow

javascript - replace any of these characters with nothing: &#39;&#39; - Stack Overflow

Bacula 11.0.1 can&#39;t eject the tape after filling it - Stack Overflow

mocking - C++Glolbal_Mock: How to mock a global function, which one calls in class method? - Stack Overflow

javascript - highcharts not loading in tabs - Stack Overflow

Superglobals vs $GLOBALS visibility in PHP - Stack Overflow

javascript - How do I use onblur to do multiple checks - Stack Overflow

woocommerce offtopic - Is there a preset CSS class when shopping cart isn&#39;t empty?

php - Laravel - Too few arguments 0 passed - Stack Overflow

Ranking sum of variable by groups from Excel Table - Stack Overflow

linux - Create a CA certificate that can also do serverAuth - Stack Overflow

javascript - YouTube iFrame API behavior is inconsistentnondeterministic - Stack Overflow

wp query - List posts in a given category

javascript - Track all custom events on global variable - Stack Overflow

发表评论

推荐文章

php - APIPlatform v2.73.0 - Custom Patch action - Wrong iri - Stack Overflow

javascript - Read blob file in base64 and upload on the server - Stack Overflow

C++ nonmember binary operator with private inheritance - Stack Overflow

Post title as link parameter

javascript - How can I set a path for a file to upload if an &lt;input&gt; element is not visible and only reference by

热门文章

reactjs - HeroUI react does not have a DateValue - Stack Overflow

merge - Javascript: How to append the prototype of a function to another one? - Stack Overflow

javascript - Utilizing environment variables in firebase-messaging-sw.js in React Boilerplate - Stack Overflow

web development server - Automatic update disabled for my WordPress website, how to resolve? - Stack Overflow

mapbox gl js - Get number of features in source data - Stack Overflow

javascript - jQuery Tooltip positioning issues - Stack Overflow

javascript - TypeError: callback is not a function when removing directory - Stack Overflow

Javascript efficient copy array into another array at index - Stack Overflow

javascript - detect file changes in vagrant guest machine - Stack Overflow

node.js - JWT Token Verification Fails with &#39;invalid signature&#39; in Express.js Middleware - Stack Overflow

最新文章

windows设置断电重启开机后自动输入锁屏密码登录

Windows系统设置开机默认开启数字小键盘

Windows11 开机自动同步时间（开机时间不更新问题）

windows配置开机自启动软件或脚本

【Redis】Windows设置Redis为开机自启动

javascript - Handling cors with next.js - Stack Overflow

php - i want to redirect to home page while page not found (404) in laravel - Stack Overflow

javascript - How to check if an entered answer is correct with HTML code? - Stack Overflow

javascript - How can I write jasmine test for angular controller and service like this? - Stack Overflow

javascript - Disable holiday, sundays and past dates inside jQuery UI datepicker - Stack Overflow

惠普OMEN 15-CE001TX 2EF91PA参数报价

苹果新款MacBook Pro 15英寸 i732GB1TBVega Pro 20参数报价

联想Y330A-PSE L参数报价

神舟战神Z7 D6 i7-12650H16GB512GBRTX4050旗舰版参数报价

神舟战神Z7 D6 i7-12650H16GB1TBRTX4050参数报价

java - How to correctly implement jOOQ's Binding to render an alternative PostgreSQL interval bind value syntax - Stack

javascript - replace any of these characters with nothing: '' - Stack Overflow

Bacula 11.0.1 can't eject the tape after filling it - Stack Overflow

woocommerce offtopic - Is there a preset CSS class when shopping cart isn't empty?

javascript - How can I set a path for a file to upload if an <input> element is not visible and only reference by

node.js - JWT Token Verification Fails with 'invalid signature' in Express.js Middleware - Stack Overflow