html - 仅适用于移动设备的引导轮播

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>