在angular7中，在小型设备上一排显示轮播，在大型设备上多个显示轮播

Question

我正在尝试以角度的方式实现此功能，但无法正常工作：-

幻灯片是自动的，也可以单击幻灯片底部的点而不是左右箭头。

Display Carousels In one Row on Small Devices

app.component.ts

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

            for (var i = 0; i < 2; i++) {
                next = next.next();
                if (!next.length) {
                    next = $(this).siblings(':first');
                }

                next.children(':first-child').clone().appendTo($(this));
            }
        });
     }

app.component.html

<div class="carousel-inner">
            <div class="item active">
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" style=" height:195px;    background: yellow;">
                    aaasas
                </div>
            </div>
            <div class="item">
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" style=" height:195px;    background: red;">
                    saasasa
                </div>
            </div>
            <div class="item">
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" style=" height:195px;    background: green;">

                </div>
            </div>
            <div class="item">
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" style=" height:195px;    background: orange;">wqqwq</div>
            </div>
            <div class="item">
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" style=" height:195px;    background: yellow;">rerer</div>
            </div>
            <div class="item">
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" style=" height:195px;    background: red;">saas</div>
            </div>
            <div class="item">
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" style=" height:195px;    background: blue;">asas</div>
            </div>
            <div class="item">
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" style=" height:195px;    background: yellow;">qwqw</div>
            </div>
        </div>