Animation of the scroll-slide effect doesn't work

[Rim-777]

Hello, Thanks a lot for the time devotion to creating this plugin. I have an issue with the scroll effect animation: To be clear - I've copied your solution from there http://localhost:4200/example/fashion and pasted to my project almost without changes, except instead of to display picture as a style backgroundImage I've used the regular tag img. For some reason, it doesn't work and I have no idea why. Could you please help me to handle it. I use Angular 8.0.0 The code: html file:

<ngx-hm-carousel
  [(ngModel)]="index"
  (ngModelChange)="indexChanged($event)"
  [infinite]="infinite"
  [data]="pictures"
  [aniTime]="200"
  class="carousel">
 <section ngx-hm-carousel-container class="content">
    <article class="item cursor-pointer visible_important"
             ngx-hm-carousel-item
             *ngFor="let picture of pictures; let i = index">
      <pinch-zoom>
        <img [src]="picture">
      </pinch-zoom>
    </article>
    <ng-template #infiniteContainer></ng-template>
  </section>
  <ng-template #carouselContent let-avatar let-i="index">
    <article class="item cursor-pointer visible_important"
    >
      <pinch-zoom>
        <img [src]="picture">
      </pinch-zoom>
    </article>
  </ng-template>
  <ng-template #carouselPrev>
    <div class="click-area">
      <i class="material-icons">keyboard_arrow_left</i>
    </div>
  </ng-template>
  <ng-template #carouselNext>
    <div class="click-area">
      <i class="material-icons">keyboard_arrow_right</i>
    </div>
  </ng-template>
  <ng-template #carouselDot let-model>
    <div class="ball bg-accent"
         [class.visible]="model.index === model.currentIndex"></div>
  </ng-template>
</ngx-hm-carousel>

companent.ts:

export class CarouselComponent implements {
  index = 0;
  infinite = true;
  directionToggle = true;
  pictures = [
    '//images.asos-media.com/products/asos-design-checkerboard-faux-fur-coat/10045678-1-multi?$XXL$&wid=2238&fit=constrain',
    '//images.asos-media.com/products/asos-design-checkerboard-faux-fur-coat/10045678-2?$XXL$&wid=2238&fit=constrain',
    '//images.asos-media.com/products/asos-design-checkerboard-faux-fur-coat/10045678-3?$XXL$&wid=2238&fit=constrain',
    '//images.asos-media.com/products/asos-design-checkerboard-faux-fur-coat/10045678-4?$XXL$&wid=2238&fit=constrain',
  ];

  constructor() {
  }

  indexChanged(index) {
    console.log(index);
  }

  toggleDirection($event) {
    this.direction = this.directionToggle ? 'right' : 'left';
  }
}

scss file:

$transition_time:.2s;

.carousel {
  color:white;
  .content {
    display: flex;

    .item {
      width: 100%;
      display: block;
      // fade
      opacity: 1;

      // using delay to prevent left change show error
      &.fade_animation {
        transition: opacity 0.295s linear $transition_time;
      }

      &.fade_animation_0 {
        transition: opacity 0.295s linear;
      }

      &.visible {
        opacity: 1;
      }

      &:last-child,
      &:first-child
      {
        opacity: 0;
      }

      &.visible_important {
        opacity: 1;
      }

      .img {
        width: 100%;
        display: block;
        background-size: cover;
        background-position: center;
        height: 0;
        padding-bottom: 50%;
      }
    }

  }

  .ball {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: black;
    border: 2px solid;
    opacity: 0.5;

    &.visible {
      opacity: 1;
    }
  }

  .progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: #ff5252;
  }

  .click-area {
    width: 50px;
    text-align: center;

    i {
      font-size: 3em;
    }
  }
}

[wolfbomb]

Any resolution on this? I also got the same issue? I did the same just copy the example from the site with just one change which is the opacity. And when i run the app it does not show me the scroll/slide effect.

[ZouYouShun]

Hi guys, that problem needs some change with angular version 8, maybe I will fix that at this weekend.

[Rim-777]

Great, we are waiting for your updates.

[wolfbomb]

Oh sorry I forgot to mention I am using Angular 7.3.9.

[ZouYouShun]

Oh sorry I forgot to mention I am using Angular 7.3.9.

What is your template and ts, here is some simple example https://stackblitz.com/edit/ngx-hm-carousel-custom https://stackblitz.com/edit/ngx-hm-carousel-custom-breakpoint

[wolfbomb]

Oh sorry I forgot to mention I am using Angular 7.3.9.

What is your template and ts, here is some simple example https://stackblitz.com/edit/ngx-hm-carousel-custom https://stackblitz.com/edit/ngx-hm-carousel-custom-breakpoint

I was using the first example. I tried the second example and the slide works.

[ZouYouShun]

@Rim-777 try the 1.7.0, I think that can resolve the problem with angular8

[Rim-777]

@ZouYouShun Thank you for the update. Currently, I've replaced the previous CSS code to the CSS file from here https://stackblitz.com/edit/ngx-hm-carousel-custom-breakpoint - and it started to work well. So probably the issue was related to CSS transition and not to version of Angular's release.

[ZouYouShun]

ok, I got that, but that need update angular version is right.

thanks for your testing.