Can't click to button inside primeNg Carousel in responsive mode

Question

i'm using PrimeNG v9 in angular project,
when i switsh to responsive mode, i can't click to the button inside my carousel,
everytime i clicked i get the next item in the carousel.
there is any solution to this problem ?

this is my HTML content :

<p-carousel [value]="services" [numVisible]="3" [numScroll]="1" [circular]="true"
    [responsiveOptions]="responsiveOptions">
    <ng-template let-service pTemplate="item" >
            <div class="img-bg2">
                <img src="{{service.url}}" class="bg-img" />
                <div class=" zero" [ngStyle]="{'background-color':  service.bgColor }"></div>
            </div>
            <div class="content content2">
                <h4>{{service.title}}</h4>
                <p>
                    {{service.body}}
                </p>
                <a routerLink="{{service.goTo}}">
                    EN SAVOIR PLUS
                </a>
            </div>
    </ng-template>
</p-carousel>

you can test it in primeNg site :

Activate responsive mode
try to click the button inside

PrimeNg's web site

Saad · Accepted Answer · 2020-03-01 11:37:09Z

4

i found the solution :
i override the changePageOnTouch in Carousel Class

import {ElementRef, NgZone } from '@angular/core';
import { Carousel } from 'primeng/carousel';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent extends Carousel {

  constructor(public el:ElementRef,
    public zone: NgZone) {
    super(el,zone);
    Carousel.prototype.changePageOnTouch = (e,diff) => {}
}

answered Mar 1, 2020 at 11:37

Saad

3665 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jose Eduardo Poma Caceres Over a year ago

This worked for me, we had the same case in mobile mode in my project using the prime-ng carousel

Murtuza Over a year ago

This worked but the swiping on the carousel item has stopped.

Saad Over a year ago

unfortunately i can't find a solution for that

Collectives™ on Stack Overflow

Can't click to button inside primeNg Carousel in responsive mode

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related