Angular 动画 Ngbcarousel 导航指示器

Question

我正在尝试为 Ngbcarousel 导航指示器（指示用户在哪张幻灯片上的圆点）设置动画，以便在用户单击（例如第 5 个指示器）时向右滚动，并继续滚动到如果用户从第 6 个指示器开始点击直到到达终点，则为右侧。

我将 https://stackblitz.com/edit/ngu-carousel-ng6-7hxy9p?file=src/app/hello.component.ts 中的代码与 Ngbcarousel 合并，使导航显示为点。

基本上我得到了我想要的样子，但我不确定如何访问 Ngbcarousel dom 结构并将动画添加到有序列表（所以当我按下第 5 个点时, 整个有序列表向左移动, 在右边显示更多的点)

理想情况下，应该看起来像 Instagram 的轮播 -> https://codepen.io/swarad07/pen/xmzQKm

carousel.component.html

<ngb-carousel
    #carousel
    class="profile-detail-carousel"
    [showNavigationArrows]="false"
    [showNavigationIndicators]="true"
    data-interval="false"
    (click)="navigateCarousel($event)"
  >
    <ng-template ngbSlide *ngFor="let imageID of imageIDs">
      <img class="carousel-img" [src]="profile | profileImage: imageID" />
    </ng-template>
    <ng-template ngbSlide *ngIf="!imageIDs?.length">
      <img class="carousel-img" [src]="{} | profileImage" />
    </ng-template>
</ngb-carousel>

caroursel.component.ts

navigateCarousel(event) {
    // checks what slideNumber was clicked
    const slideNumber = parseInt(event && event.path[0].id.match(/\d+/)[0], 10);
    if (slideNumber >= 5) {
      console.log(this.carousel); // carousel ol element to scroll right 
    }
  }

carousel.component.scss

.profile-detail-carousel .carousel-indicators {
  display: flex;
  justify-content: left;
  bottom: -40px !important;
  overflow: hidden;
  list-style-type: none;
  text-align: center;
  padding: 12px;
  margin: 0;
  width: 105px;
  white-space: nowrap;
  box-sizing: border-box;
  margin: auto;
  li {
    display: inline-block;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.55);
    padding: 4px;
    margin: 0 3px;
    transition-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);
    transition: 0.4s;
    height: 1px;
    width: 1px;
    &.active {
      background: #6b6b6b;
      transform: scale(1.2);
    }
  }
}

感谢您的帮助，谢谢！

Answer 1

噗噗是几声，几件事要做。

首先为旋转木马设置动画，参见

第二个动画指标。如果你只想显示一些指标，我认为最好创建你自己的指标

<div class="wrapper">
<div class="selectors" [@move]="{value: trans.value, params: {position:trans.position}}">
  <ng-container  *ngFor="let t of slidesValue">
        <div class="selector"  (click)="carousel.select(t)" [style.background-color]="carousel && t==carousel.activeId?'black':'transparent'">
        </div>
  </ng-container>
    </div>
</div>

我用幻灯片的名称创建了一个数组"slidesValues"

slidesValue=['id1','id2','id3','id4','id5','id6']

嗯，动画我觉得是

trigger('move', [
      state('true', style({ transform: 'translateX({{position}})' }), { params: { position: '10px' } }),
      state('false', style({ transform: 'translateX({{position}})' }), { params: { position: '10px' } }),
      transition('* <=>*', animate('260ms ease-in'))

    ])

然后在 onSlide(event) 中添加（numIndicator 是您可以看到的指标，变量 pos 作为位置）

let index=this.slidesValue.findIndex(x=>x==event.current)
if (index!=0 && index!=this.slidesValue.length-1)
{
  if (index==this.pos+this.numIndicator-1)
    this.pos++;
  if (index==this.pos)
    this.pos--;

  this.trans={value:this.trans.value=!this.trans.value,position:-this.pos+'rem'}

}

我知道改进代码很容易，但我在 stackblitz

中留下了 "as is" 最终结果

更新真的我不喜欢用什么方式来控制"position"。最好的位置仅取决于 "index"。由于计算有点复杂，我更喜欢数组 slidesValue 成为具有两个属性 "name" 和 "pos" 的对象数组，所以在 ngOnInit

  ngOnInit()
  {
    let increment=this.numIndicator%2==0?0:.5
    let first=this.numIndicator/2-increment;
    let last=this.data.length-this.numIndicator/2-increment
    this.slidesValue=this.data.map((x,index)=>{
    return {
      name:'id'+index,
      pos:(index<first?first:index>last?last:index)
              -this.numIndicator/2+increment
      }
    })
  }

并且 onSlide(event) 变为：

this.pos=this.slidesValue.find(x=>x.name==event.current).pos
this.trans={value:this.trans.value=!this.trans.value,position:-this.pos+'rem'}

stackBlitz 也更新了

Angular 动画 Ngbcarousel 导航指示器

Angular Animate Ngbcarousel navigation indicators

carousel

ng-bootstrap

angular