[BUG] Touch on Android - Cordova

[Furieux33]

Hello,

Firstly, thanks for this fabulous tool ! Simple and efficiency !

I meet a problem with the dots on Android (build cordova). In the next video, you can see the problem. When using the autoplay or the arrows, no problem, but when i touch to change slide, the dot not change...

https://streamable.com/vru69

Thanks,

Regards !

EDIT - I use the last version ;)

[ZouYouShun]

Hi @Furieux33

could you show your code below?

It seem the hammer problem, I will try this on cordova, Is you using ionic? or pure cordova?

[Furieux33]

Hi @ZouYouShun

Yes of course ;)

this.carousel = { speed: 2500, infinite: true, direction: 'right', autoplay: true, delay: 0, mouse: true, };

component.html ` <ngx-hm-carousel [autoplay-speed]="carousel.speed" [autoplay]="carousel.autoplay" [autoplay-direction]="carousel.direction" [infinite]="carousel.infinite" [between-delay]="carousel.delay" [mourse-enable]="carousel.mouse" class="last-conversions-slider">

                            <section ngx-hm-carousel-container class="content">
                                <article *ngFor="let singleConversion of singleBlock.last_conversions" class="slide item cursor-pointer" ngx-hm-carousel-item>
                                </article>
                            </section>

                            <ng-template #carouselPrev>
                                <div class="left-arrow arrows">
                                    <i class="ion-ios-arrow-back"></i>
                                </div>
                            </ng-template>
                            <ng-template #carouselNext>
                                <div class="right-arrow arrows">
                                    <i class="ion-ios-arrow-forward"></i>
                                </div>
                            </ng-template>

                            <ng-template #carouselDot let-model>
                                <div class="dot" [class.active]="model.index === model.currentIndex"></div>
                            </ng-template>
                        </ngx-hm-carousel>

SCSS `.last-conversions-slider{

    padding: 0 10px;
    z-index: 9;

    .content {
        display: flex;
        &.transition{
            transition: 250ms;
        }

        .item {
            width: 100%;
            display: block;
        }
    }
    .indicators{
        position: relative !important;
        bottom: 0 !important;
        margin: 10px 0 !important;

        .dot {
            background: white;
            width: 8px;
            height: 8px;
            opacity: 0.6;
            border-radius: 100%;
            transition: 150ms;
            &.active{
                opacity: 1;
                transform: scale(1.5);
            }
        }
    }

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

    .arrows{
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1001;
        font-size: 27px;
        opacity: 0.8;
        cursor: pointer;
        padding: 5px 10px;

        &.right-arrow{
            right: 0;
            left: auto;
        }

        &:hover{
            opacity: 1;
        }
    }
    .click-area {
        width: 50px;
        text-align: center;
        i {
            font-size: 3em;
        }
    }
}`

---

I use just cordova, not ionic ;)

Thanks !!

EDIT : the preview of the code is very strange...

[ZouYouShun]

Hi @Furieux33, I try it on cordova is work fine.

Is you using changeDetection: ChangeDetectionStrategy.OnPush in your component?

if you using that when index change, the view doesn't know that, an sample way to fix that is add [(ngModel)]="index" on the ngx-hm-carousel like below

<ngx-hm-carousel #carousel
  [(ngModel)]="index"        <-----------here
  [autoplay-speed]="speed"
  [autoplay]="autoplay"
  [autoplay-direction]="direction"
  [infinite]="infinite"
  [between-delay]="2000"
  class="carousel c-accent">

it will call onChange to emit value, and this event will trigger the ChangeDetection, view will check again, the carousel will works normally.

[ZouYouShun]

I has fixed ChangeDetection Problem with ngZone, and performance problem with progress bar at the same time , you can try this by install

npm i ngx-hm-carousel@1.3.1

[Furieux33]

It's work !!! Thank you so much for your reactivity !!