Multi-item carousel bootstrap 4

Question

I want to make a Carousel that contains multi items or images, it will display 4 items then when I press on next a new item will appear and so on. This image describes what I want :

I've tried several codes on the Internet but all of them on bootstrap 3 and jquery. I want it with bootstrap 4 and jquery

I've tried this code but it didn't work

Answer 1

Check out this kenwheeler.github.io/slick it should do what you want.

Answer 2

Here's an easier solution using Bootstrap 4 only...

Add a special CSS class (ie:active-next) to show the items the same way the active class does. When the carousel updates the active slide, add the class to the next item(s). Then apply the special class only on larger widths using a media query.

Demo: http://www.codeply.com/go/Q26U8fJDbx

CSS

@media (min-width: 768px) {
    .carousel-item.active-next {
        display: flex;
    }
}

jQuery

$('#mySlider').on('slide.bs.carousel', function (e) {
  var $e = $(e.relatedTarget);
  $e.removeClass('active-next');

  var $next = $e.next();
  if ($next.length===0){
      $next = $('.carousel-item').eq(0);
  }
  var $nextnext = $e.next().next();
  if ($nextnext.length===0){
      $nextnext = $('.carousel-item').eq(1);
  }
  $next.addClass('active-next');
  $nextnext.addClass('active-next');
});

Demo Bootstrap 4