загрузочная карусель только для мобильных устройств

Question

У меня есть вопрос о карусели bootstrap4.В настоящее время у меня есть встроенная карусель для всех устройств, но я хочу, чтобы она появлялась только на мобильных устройствах.На рабочем столе сделайте фотографии рядом.Я знаю, что могу сделать два контейнера, один для рабочего стола, а другой с каруселью.Но я бы хотел этого избежать.Все предложенные решения предназначены для jQuery, однако я использую Angular7 и хотел бы избежать jQuery.

                    <div id="demo" class="carousel slide" data-ride="carousel">

                      <!--  Indicators -->

                        <ul class="carousel-indicators">
                                <li data-target="#demo" data-slide-to="0" class="active"></li>
                                <li data-target="#demo" data-slide-to="1"></li>
                                <li data-target="#demo" data-slide-to="2"></li>
                        </ul>

                            <!--      The slideshow -->

                              <div class="carousel-inner">
                                <div class="carousel-item">
                                  <img src="img1.jpg">
                                </div>
                                <div class="carousel-item">
                                  <img src="img2.jpg">
                                </div>
                                <div class="carousel-item">
                                  <img src="img3.jpg">
                                </div>
                              </div>

                              <!-- Left and right controls -->
                              <a class="carousel-control-prev" href="#demo" data-slide="prev">
                                  <mat-icon class="prev-icon">chevron_left</mat-icon>
                                <!--<span class="carousel-control-prev-icon"></span>  --> 
                              </a>
                              <a class="carousel-control-next" href="#demo" data-slide="next">
                                      <mat-icon class="next-icon">chevron_right</mat-icon>
                              </a>

                            </div>

Answer 1

img1: string = 'img1.jpg'
img2: string = 'img2.jpg'
img3: string = 'img3.jpg'

isHandset$: Observable<boolean> = this.breakPointObserver.observe(['(max-width: 750px)'])
    .pipe(
      map(result => result.matches)
    );

  constructor(private breakPointObserver: BreakpointObserver) { }

шаблон скрыть на экране менее 750 пикселей:

<div *ngIf="!(isHandset$ | async)">

Решения:

// this whows on 750-
<div *ngIf="(isHandset$ | async)" id="demo" class="carousel slide" data-ride="carousel">
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
  <div class="carousel-inner">
    <div class="carousel-item">
      <img [src]="img1">
    </div>
    <div class="carousel-item">
      <img [src]="img2">
    </div>
    <div class="carousel-item">
      <img [src]="img3">
    </div>
  </div>
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <mat-icon class="prev-icon">chevron_left</mat-icon>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <mat-icon class="next-icon">chevron_right</mat-icon>
  </a>
</div>
//this shows on 750+
<div *ngIf="!(isHandset$ | async)" class="row carousel-inner">
  <div class="col-4 carousel-item">
    <img [src]="img1">
  </div>
  <div class="col-4 carousel-item">
    <img [src]="img2">
  </div>
  <div class="col-4 carousel-item">
    <img [src]="img3">
  </div>
</div>