Displaying a trio of images in a rotating carousel with Bootstrap 4. Move forward one slide

I came across this carousel and I'm trying to figure out how to integrate it seamlessly with the latest Bootstrap 4 version.

< script >
  $('#recipeCarousel').carousel({
    interval: 10000
  })

  <
  /script>
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
  transform: translateX(33.33%);
}

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

.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
  transform: translateX(0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container text-center my-3">
  <h2>Bootstrap 4 Multiple Item Carousel</h2>
  <div class="row mx-auto my-auto">
    <div id="recipeCarousel" class="carousel slide w-100" data-ride="carousel">
      <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
          <img class="d-block col-4 img-fluid" src="images/Action%201.jpg">
        </div>
        <div class="carousel-item">
          <img class="d-block col-4 img-fluid" src="images/Action%202.jpg">
        </div>
        <div class="carousel-item">
          <img class="d-block col-4 img-fluid" src="images/Action%203.jpg">
        </div>
      </div>
      <a class="carousel-control-prev" href="#recipeCarousel" 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="#recipeCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
  <h4>Advances one slide at a time</h4>
</div>

Has anyone been successful in integrating this carousel with the latest Bootstrap version? It seems to work fine using bootstrap 4.0, but with the newest version, it only displays one image on the left at a time.

htmlcssbootstrap-4

Answer №1

Have you implemented the entire JavaScript code snippet provided in the example? It appears that there may be a section missing:

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

    if (next.next().length>0) {
        next.next().children(':first-child').clone().appendTo($(this));
    }
    else {
        $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
    }
});

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

What is the process of incorporating a video into a react.js project through the use of the HTML

I'm experiencing an issue where my video player loads, but the video itself does not. Can anyone shed light on why this might be happening? class App extends Component { render() { return ( <div className="App& ...

javascripthtmlreactjs

What is the best way to incorporate a unique CSS3 animation and transition on hover?

I've created a CSS3 animation test that adjusts the background-size of an element to create a pulsating effect when clicked, toggling the 'active' class and triggering a transition. However, I'm facing an issue where the animation stops ...

javascriptjquerycss

"Troubleshooting: Difficulty with hover function in jqgrid not functioning on colored rows

My JQGrid setup includes the following: <table id="grid"></table> var data = [[48803, "DSK1", "", "02200220", "OPEN"], [48769, "APPR", "", "77733337", "ENTERED"]]; $("#grid").jqGrid({ datatype: "local", height: 250, colNa ...

javascriptjqueryhtmlcssjqgrid

Transform the CSS to a Mat-Form-Field containing a search box within it

I am currently working with Angular, Angular Material, and SCSS for my project. Here is the front-end code snippet that I am using: <mat-form-field class="custom-form-field" style="padding-top: 5px;padding-bottom: 0px; line-height: 0px; ...

cssangularangular-material

Challenges with HTML and Session Handling

It's not functioning properly! <?php session_start(); ?> <p class="username"><?php echo $_SESSION['name']; ?></p> ...

phphtml

As one container is being moved, they both shift down simultaneously

I have set up a container named main that contains another container called banner, like this: <div id="main"> <div id="banner"></div> </div> Main has a gradient background and I want the banner to be positioned in the middle of t ...

htmlcss

The Continued Saga of IE8 Positioning Woes

Managing a social network for the cystic fibrosis community has been a rewarding experience. One particular section allows users to leave comments and engage in discussions. While the implementation using html, css, and jQuery has been seamless on Firefox, ...

jqueryhtmlcssinternet-explorer

Elegant CSS background image fade effect

Having a small JS script that functions properly, but encountering an issue when quickly hovering over buttons causing the smooth transition effect to not work as desired. This abrupt change in image is quite unappealing. Any help would be greatly appreci ...

javascriptcsscss-animationscss-transitions

AngularJs: Activate the Submit Button only when a file upload path has been chosen

Hey, I'm currently learning AngularJS and I'm trying to figure out how to disable the upload button until a file is selected. I've tried the code below, and while the button gets disabled, it doesn't become enabled after selecting a fil ...

htmlangularjsbuttonfile-upload

Instructions on how to present a list of employee information according to the user's gender preference using a selection of three radio buttons

I have developed a view that displays a table of employees, using a json array to store their details in the component. Additionally, I have implemented 3 radio buttons: all, male, and female. My goal is to have the table show all employees when "all" is ...

htmlangulartypescript

How can I display two slides at once in Ionic 2/3 on a wide screen?

I have been searching for a solution that will allow me to display 1 ion-slide if the device screen is small, but if it's larger, then I want to display 2 ion-slides. Unfortunately, I have not been able to find a suitable solution yet. As an example, ...

javascripthtmltypescriptionic2ionic3

There is excessive white space at the bottom of my Index page after the footer that needs to be removed

Recently began working on converting a PSD to HTML and I've reached a point where everything seems fine. However, I understand that my CSS programming may not be the best at the moment. With your help, I am confident that I can learn and improve gradu ...

htmlfooter

Is it possible for a font to exclude the space character?

I'm currently developing a font detection library that must be extremely compact in size, perfect for direct inclusion on every page of a website. I've managed to shrink it down quite a bit already (compressed to 417 bytes). Take a look at it on ...

javascriptcssbrowserfontswhitespace

Having trouble with sending a post request through ajax

Whenever I try to initiate an Ajax request upon clicking a button, the request never seems to get executed. Below is the snippet of my HTML code : <!DOCTYPE html> <html lang="en"> <head> <title>User Form</title> ...

javascripthtmljqueryajax

What is preventing the hidden attribute from being edited within a modal window?

Recently, I've come across an issue with changing the hidden attribute inside a modal. No matter what I try, I can't seem to change the value of it. Here is the code snippet I attempted to use: function SignUp() { $("#regModal").modal( ...

jqueryasp.net-mvcbootstrap-4modal-dialogbootstrap-modal

Facing issues with displaying CSS and images on Django website

Just starting out with Django and encountering some trouble getting my CSS and images to display in my home.html file. I attempted to add a STATICFILES_DIR based on some research I did, but the content still isn't showing up. I also experimented with ...

pythonhtmlcssdjango

Tips for adjusting the height of the Bootstrap navbar and ensuring the text remains centralized

I've attempted various methods to customize the Bootstrap navbar. I have successfully changed its color and adjusted its height. However, there is still an issue with the text alignment.Check it out here. ...

csshtmltwitter-bootstrapheightnavbar

Ensuring radio button validation prior to redirecting to contact form

I created a survey form using HTML and CSS. I am looking to add validation to the questions before redirecting to the Contact form page. Currently, when a user clicks on the submit button in the Survey form, the page redirects to the contact form. Howeve ...

javascriptjqueryhtmlcss

Enhancing the pagination look and feel in Laravel 5.1

Is it possible to customize the paginator layout in Laravel 5.1? I am looking to include first and last links along with the default previous and next links. I would like to change the previous and next links to show icons instead of text, while still ma ...

phpcsspaginationlaravel-5.1

Difficulty in centering two equal-sized columns in a Bootstrap 3 row with an offset

Here is a link to my demonstration on JSFiddle: https://jsfiddle.net/nbd2w3zb/ I am working with Bootstrap 3 and have created 2 equal-sized columns (.col-md-4) within a .row. The desired effect is to center both of these columns inside the .row, ensuring ...

htmlcsstwitter-bootstrap