Simple Bootstrap 4 Carousel with a part of the next slide near the main carousel item

Question

I want a simple Bootstrap 4 carousel which reveals a part of the next slide in the right . I found two questions similar to mine but didnt work out .Those links are

1)Bootstrap carousel reveal part of next slide

2)Bootstrap carousel show only part of the slide

I have tried creating a div near by with the next image src .This was a total mess .I dont go with any other libraries such as OWL carousel. I have attached below a simple bootstrap 4 carousel code with three image sliders.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
  <img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
  <img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
  <img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
</div>

I need the next carousel item(quarter of it) to be displayed along with main carousel item

Answer 1

It worked for me. Please see the live example below.

$('.multi-item-carousel .carousel-item').each(function() {
  var next = $(this).next();
  if (!next.length) next = $(this).siblings(':first');
  next.children(':first-child').clone().appendTo($(this));
});
$('.multi-item-carousel .carousel-item').each(function() {
  var prev = $(this).prev();
  if (!prev.length) prev = $(this).siblings(':last');
  prev.children(':nth-last-child(2)').clone().prependTo($(this));
});

.multi-item-carousel {
  overflow: hidden;
}

.multi-item-carousel .carousel-control-prev,
.multi-item-carousel .carousel-control-next {
  background: rgba(255, 255, 255, 0.5);
  width: 5%;
}

.multi-item-carousel .carousel-inner {
  width: 310%;
  left: -80%;
}

.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
  transform: translateX(75%);
}

.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
  transform: translateX(-75%)
}

.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
  transform: translateX(0);
}

.item__third {
  float: left;
  width: 25%;
  background-size: cover;
  height: 400px;
}

#bg-1 {
  background: url(https://source.unsplash.com/juHayWuaaoQ/1200x400);
}

#bg-2 {
  background: url(https://source.unsplash.com/eWFdaPRFjwE/1200x400);
}

#bg-3 {
  background: url(https://source.unsplash.com/eXHeq48Z-Q4/1200x400);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div id="carousel-1" class="carousel slide multi-item-carousel" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-1" data-slide-to="1"></li>
    <li data-target="#carousel-1" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <div class="item__third" id="bg-1"></div>
    </div>
    <div class="carousel-item">
      <div class="item__third" id="bg-2"></div>
    </div>
    <div class="carousel-item">
      <div class="item__third" id="bg-3"></div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carousel-1" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Answer 2

Hi Just have a look at this example is related to your question you can customize it

$('.carousel-item', '.multi-item-carousel').each(function(){
  var next = $(this).next();
  if (! next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));
}).each(function(){
  var prev = $(this).prev();
  if (! prev.length) {
    prev = $(this).siblings(':last');
  }
  prev.children(':nth-last-child(2)').clone().prependTo($(this));
});

.multi-item-carousel {
  overflow: hidden;
}
.multi-item-carousel .carousel-indicators {
  margin-right: 25%;
  margin-left: 25%;
}
.multi-item-carousel .carousel-control-prev, 
.multi-item-carousel .carousel-control-next {
  background: rgba(255, 255, 255, 0.3);
  width: 25%;
  z-index: 11;  /* .carousel-caption has z-index 10 */
}
.multi-item-carousel .carousel-inner {
  width: 150%;
  left: -25%;
}
.carousel-inner > .carousel-item.next, 
.carousel-inner > .carousel-item.active.right {
  -webkit-transform: translate3d(33%, 0, 0);
  transform: translate3d(33%, 0, 0);
}
.carousel-inner > .carousel-item.prev, 
.carousel-inner > .carousel-item.active.left {
  -webkit-transform: translate3d(-33%, 0, 0);
  transform: translate3d(-33%, 0, 0);
}
.item__third {
  float: left;
  position: relative;  /* captions can now be added */
  width: 33.33333333%;
}

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Bootstrap Carousel 4 - Show parts of prev and next slides with captions</title>
  
  
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="bd-example">
	<div id="carouselExampleCaptions" class="carousel slide multi-item-carousel" data-ride="carousel">
		<ol class="carousel-indicators">
			<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
			<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
			<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
		</ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <div class="item__third">
          <img src="//placehold.it/900x300/c69/f9c/?text=1" class="d-block w-100" alt="">
          <div class="carousel-caption d-none d-md-block">
            <h5>First slide label</h5>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <div class="item__third">
          <img src="//placehold.it/900x300/9c6/cf9/?text=2" class="d-block w-100" alt="">
          <div class="carousel-caption d-none d-md-block">
            <h5>Second slide label</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <div class="item__third">
          <img src="//placehold.it/900x300/69c/9cf/?text=3" class="d-block w-100" alt="">
          <div class="carousel-caption d-none d-md-block">
            <h5>Third slide label</h5>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
          </div>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>