我正在使用
"ngx-bootstrap": "^3.1.3",
轮播组件。我想让我的网站更便于残障人士访问。不幸的是,我找不到修改幻灯片指示器以便可以使用键盘访问它们的方法。有办法吗?
这是我得到的:
<ol class="carousel-indicators ng-star-inserted">
<li class="ng-star-inserted"></li>
<li class="ng-star-inserted active"></li>
</ol>
我想要的是:
<ol class="carousel-indicators ng-star-inserted">
<li class="ng-star-inserted" tabindex="0" role="button" aria-pressed="false"></li>
<li class="ng-star-inserted active" tabindex="0" role="button" aria-pressed="true"></li>
</ol>
我找到了解决方法。基本上我确实隐藏了原始指标并创建了我自己的指标。
<carousel [noPause]="false" [(activeSlide)]="activeSlide" [showIndicators]="false">
<slide *ngFor="let item of items">
...
</slide>
<!-- add this -->
<div class="indicators">
<button *ngFor="let item of items; let i = index" type="button" class="indicator"
[class.active]="i === activeSlide" [attr.aria-pressed]="i === activeSlide"
(click)="switchSlide(i)"></button>
</div>
<!-- /add this -->
</carousel>
通过这种方式,您可以完全控制指标,可以根据需要设置样式,也可以修改它的方式使其易于访问。