我对 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>
最佳答案
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>
https://stackoverflow.com/questions/56820051/
相关文章:
rust-cargo - 如何修复 cargo 的 "failed to parse manifes
python - 如何使用 python 在我的 github 帐户上创建远程 git 存储库或使用
c# - Asp.net core Identity登录成功重定向回登录页面
javascript - 让 WebStorm 识别 jest.setupFilesAfterEnv
javascript - 如何在javascript中将文件移动到drive api v3中的垃圾桶
angular - Uncaught TypeError : ace. acequire 不是函数