Multiple Image Sliding Carousel problem in Bootstrap-4.3

Question

I was trying to make a Carousel containing multiple images in row and sliding one images at a time with bootstrap only. Like this:

I tried following this post. Instead of bootstrap-3.3.6 and jquery-2.2.2 I used bootstrap-4.3.1 and jquery-3.3.1 But in my case images are in vertical order instead of horizontal order. What am I doing wrong? How can I arrange images in horizontal order?

$(document).ready(function () {
  $('.fdi-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));
    }
  });
});

#outerCarousel {
  width: 100%;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: tomato !important;
}
.carousel-inner.onebyone-carousel {
  margin: auto;
  width: 90%;
}
.onebyone-carousel .active.carousel-item-left {
  left: -33.33%;
}
.onebyone-carousel .active.carousel-item-right {
  left: 33.33%;
}
.onebyone-carousel .carousel-item-next {
  left: 33.33%;
}
.onebyone-carousel .carousel-item-prev {
  left: -33.33%;
}

Thanks.

Yunhai · Accepted Answer

First, the code you provided was pretty buggy. I believe there are many online carousel example that are just copy&paste from someone else but never try to understand the code, instead, they keep adding more buggy code to fix the problem they can "see", just be careful.

There are many useless

wrappers and CSS stylings that intend to fix the buggy behaviors, which obviously makes the debug process worse.

I kindly suggest that you can take a look at the official document first to see the structure for those component and then slowly implement the ideas based on the SO answers.

I just delete most of them from your code for demonstration purpose only.

In order to make it responsive, I believe you have to modify the js code so it can fill up the carousel for different col-size as well as CSS. But it seems like there is not an easy way to work around for CSS part.

$(document).ready(function () {
  $('.fdi-Carousel .carousel-item').each(function () {
    var next = $(this).next();
    if (!next.length) {
      next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));
    
    //this will only work for carousel with 3 items since it only adds next() and  next.next();

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

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: tomato !important;
}

.fdi-Carousel .carousel-inner .active.carousel-item,
.fdi-Carousel .carousel-inner .carousel-item-next,
.fdi-Carousel .carousel-inner .carousel-item-prev {
  display: flex;
} 

/* 'Again 33% means col-4, in order to make it responsive or whatever you want, you have to create different translateX()  for differernt col' */
.fdi-Carousel .carousel-inner .active.carousel-item-left, .fdi-Carousel .carousel-inner .carousel-item-prev {
  transform: translateX(-33.33%);
}
.fdi-Carousel .carousel-inner .active.carousel-item-right, .fdi-Carousel .carousel-inner .carousel-item-next {
  transform: translateX(33.33%);
}

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

Multiple Image Sliding Carousel problem in Bootstrap-4.3

Answers (2)

Related Questions