时间戳

首页 > 解决方案 > 以中心卡为焦点的角形多卡转盘

javascript - 以中心卡为焦点的角形多卡转盘

问题描述

我从以下位置获得了多卡的代码：

https://www.codeply.com/go/EIOtI7nkP8

上面的代码显示了多张卡片，我需要 3 张卡片，这样每次转盘移动并且第三张卡片位于中心时，我可以动态添加类来更改其 css 属性。我正在 Angular10 上制作我的项目，需要使用 *ngfor 来创建这些卡片。

滑动前： 幻灯片前

滑动后： 在此处输入图像描述

必须突出显示中央卡片。HTML：

<div class="container">
<div class="row">
  <div class="col" *ngFor="let item of fakeArray;let i=index">
  <div class="card" [style.background-color]="color[i]">
    <img class="card-img-top" src="assets/home.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">{{i+1}}</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div></div>
  </div></div>
  </div>


  fakeArray= new Array(3)

在过去的 3 天里，我一直坚持下去。任何帮助表示赞赏:)

标签： javascripthtmlcssangular

解决方案

我等了一天并编码了几天，因为我没有得到答案，我发现这些组件存在一个库 swiper js。

https://stackblitz.com/edit/swiper-angular-example?file=src%2Fstyles.scss 您可以在更改幻灯片上调用函数来动态更改 css 或类。

推荐阅读