title: Multiple item carousel with Angular 4+
body: <p>I am using Angular 4 with ngx-bootstrap. To display one slide per time with bootstrap carousel, it worked very okay. But currently I need to display about 3 items per slide, and each time move only one slide.
  Is there any Angular way to achieve this purpose?</p>
  
  <p>An example of multiple items with bootstrap carousel can see here:
  <a href="https://codepen.io/kchez/pen/jWzqjo" rel="nofollow noreferrer">https://codepen.io/kchez/pen/jWzqjo</a></p>
  
  <p>I tried to follow the same work by calling the function inside <code>ngAfterViewChecked</code> but it didn't work as expected.</p>
  
  <pre><code>callMultipleSlide() {
      // Instantiate the Bootstrap carousel
      jQuery('.multi-item-carousel').carousel({
        interval: 1500
      });
  
      // for every slide in carousel, copy the next slide's item in the slide.
      // Do the same for the next, next item.
      jQuery('.multi-item-carousel .item').each(function () {
        let next = jQuery(this).next();
        if (!next.length) {
          next = jQuery(this).siblings(':first');
        }
        next.children(':first-child').clone().appendTo(jQuery(this));
  
        if (next.next().length &gt; 0) {
          next.next().children(':first-child').clone().appendTo(jQuery(this));
        } else {
          jQuery(this).siblings(':first').children(':first-child').clone().appendTo(jQuery(this));
        }
      });
    }
  </code></pre>