Elegant Bootstrap 4 Carousel featuring a glimpse of the upcoming slide alongside the primary carousel item

I am in search of a straightforward Bootstrap 4 carousel that showcases a glimpse of the next slide on the right. Despite exploring similar questions, I have not found a suitable solution. The links to those questions are:

1)Bootstrap carousel reveal part of next slide

2)Bootstrap carousel show only part of the slide

My attempt to create a separate div with the next image source ended in chaos. I prefer not to use other libraries like OWL carousel. Below is a basic 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>

My goal is to have a portion of the next carousel item displayed alongside the main carousel item.

javascriptjqueryhtmlcssbootstrap-4

Answer №1

Success! Check out the demonstration below to see it in action.

$('.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

Hey there! Take a look at this example that is relevant to your query, and feel free to customize it to suit your needs.

$('.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing dynamic content loading using CSS and jQuery upon link/button activation

I'm facing an issue where I am attempting to align content to the left side of my screen to display a feed while also ensuring that the pushed content is responsive. Unfortunately, the feed is not visible and the content remains unresponsive. Is ther ...

jquerycss

Getting the Most out of jQuery UI Autocomplete in ASP.NET

I am currently using jQuery UI Autocomplete in conjunction with ASP.NET. The process involves serializing Good names into a string array and then passing this array to the source of the jQuery UI AutoComplete. //PageLoad tadok.Entities.TList<tadok.Enti ...

c#jqueryasp.netjquery-uijquery-ui-autocomplete

Unchecking and checking the radio button is necessary in order for it to function properly

Today, I'm puzzled by the odd behavior of my radio buttons in a pixel drawer project. In order for the radio button to function properly, I have to uncheck it and then recheck it. The pixel drawer allows me to change colors and sizes using these radio ...

javascripthtmlradio-button

What methods are available to test my website across different browsers such as outdated versions of Internet Explorer like IE8?

Currently, I am working on Chrome with Windows 7 OS installed. However, Windows 7 does not support Internet Explorer 8. This is causing issues when trying to view my web pages in the IE8 version and older. How can I resolve this problem? I have attempted ...

javascripthtmlcssuser-interface

AngularJS allows you to toggle the visibility of a div at set intervals, creating

I am struggling with the task of showing and hiding a div that serves as an alert for my application. Currently, I am using $interval to create a continuous show and hide action on the div. However, what I aim for is to have the DIV visible for X amount o ...

javascriptjqueryhtmlangularjs

Tips for sending an email without using MAILTO in JavaScript or jQuery

Today is a great day for many, but unfortunately not for me. I've been struggling with this issue for over two weeks now and can't seem to find a solution anywhere on the internet. Stack Overflow always comes to my rescue when things get really t ...

javascriptjqueryhtmlemail

Use .load() to set an image as background in the div

There is a block of code that is supposed to display images in a div with the class "img", but it isn't functioning correctly. Can you provide some guidance on how to fix this issue? <div class="other"><a href="/index1.html">Link1</a&g ...

javascriptjqueryhtmlimage

Animate the service item with jQuery using slide toggle effect

Currently, I am working on a jQuery slide toggle functionality that involves clicking an item in one ul to toggle down the corresponding item in another ul. However, I am encountering difficulties in linking the click event to the correct id and toggling t ...

javascriptjqueryhtmlcss

Angular Directives in Error

Help needed with creating a custom directive in Angular. Seeking guidance :) I am trying to display the content from 'directive.html' within the 'app-info' directive. The code functions properly without the directive, indicating a mist ...

javascriptangularjs

Include token in src tag requests Angular version 8

In the process of developing a website, I have encountered a challenge. I am creating a platform where users can access another website I am currently working on after they log in. Once authorized, users receive a JWT token which is sent in the header with ...

javascripthtmlangularasp.net-core

"I am interested in using the MongoDB database with Mongoose in a Node.js application to incorporate the

I am facing a situation where I need to validate the name and code of a company, and if either one matches an existing record in the database, it should notify that it already exists. Additionally, when receiving data with isDeleted set to true, I want to ...

javascriptnode.jsreactjsmongodbmongoose

Formatting the numbers for an unordered list located outside of the content

Can the numbers of an ordered list be formatted using the list-position-style set to outside? I am looking for a solution using only CSS since I cannot edit the HTML. Essentially, I want styled numbers with round background to replace the outside numbers. ...

htmlcsshtml-lists

"Utilize the attr attribute to showcase an image within an HTML select element

I'm trying to showcase the flag of each country in a dropdown menu. Here is the code I attempted: <select id="slcCountry"> <option flag="https://restcountries.eu/data/afg.svg">AFG</option> <option flag="https://restcountr ...

jqueryhtmlcsshtml-select

What is the best way to interact with all the rendered DOM elements in React that were created using the map method

return <div> <div >{'Audios'}</div> {urls.map(url => <div > <audio controls src={url} ref={(element) => this.audioRefs.push(element)} /> </div>)} </div>; I a ...

javascripthtmlreactjsfrontend

How can I create a CSS animation for a box element?

During my current project, I have the task of creating a box that will display an animation within 2 seconds and move from one corner to another. What is the most straightforward way to achieve this? ...

css

Modify the variable to encompass a multitude of hues - scss

Hello, I am looking to modify the background of a page for dark mode. This is the current background styling: $orangeLight:#FFA500!default; $redLight:#FA8072!default; $blueLight:#B0C4DE!default; $greenLight:#90EE90!default; $list2: $blueLight 0%,$blueLi ...

csssass

Debugging a node.js application remotely using SAP Cloud Foundry

Having successfully deployed multiple node.js express services on SAP Cloud Foundry, we have encountered a roadblock in the form of remote debugging. Recognizing that others may be facing similar challenges, we are putting forth a direct inquiry: What is ...

javascripttypescriptsap-cloud-platformsap-cloud-sdk

Is nesting ajax calls in jQuery a clever strategy?

I currently have this ajax call: $.ajax({ url: "misc/sendPM.php", type: "POST", data: data, success: function(stuff) { if (typeof stuff == "object") { var err = confirm(stuff.error); if (err) { ...

javascriptjqueryajax

How about implementing a 'thumbs up' feature on every post?

I'm relatively new to SQL and PHP and have successfully set up a database where I can input entries through an HTML form. However, I am struggling with implementing a 'like button' feature that will increment a counter for each specific post ...

phphtmlmysql

Cease the execution of promises as soon as one promise is resolved

Using ES6 promises, I have created a function that iterates over an array of links to search for an image and stops once one is found. In the implementation of this function, the promise with the fastest resolution is executed while others continue to run ...

javascriptpromisees6-promisecancellation