Angular PrimeNG Carousel Properties

Last Updated : 28 Apr, 2025

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. It provides a lot of templates, components, theme design, an extensive icon library, and much more. In this article, we will see the Angular PrimeNG Carousel Properties.

The Carousel is a content slider component where an array of data is shown sequentially either manually or automatically. The Carousel in Angular PrimeNG provides great customization that can be used to create dynamic carousels.

There are various properties provided by Angular PrimeNG that can be used to enhance the styling of the Carousel, which are described below.

Angular PrimeNG Carousel Properties:

value: An array of objects to display in the carousel.
page: It denotes an index of the first item in the carousel.
style: It specifies an inline style of the component.
styleClass: This class is used for styling the viewport container.
circular: This class can be used to set scrolling infinite.
showIndicators: This class is used to specify whether to display indicator containers or not.
showNavigators: This class is used to specify whether to show navigation buttons or not.
autoplayInterval: This class specifies the time to scroll items automatically.
numVisible: This class specifies the number of items per page.
numScroll: This class specifies the number of items to scroll.
responsiveOptions: This class specifies options for responsive design.
orientation: This class is used to set the orientation of the carousel
verticalViewPortHeight: This class is used to specify the height of the viewport in a vertical layout.
contentClass: This class is used to specify the style class of the main content.
indicatorsContentClass: This class is used to specify the style class of the paginator items.
indicatorsContentStyle: This class is used to specify the style of the paginator items.
indicatorStyleClass: This class is used to specify the style class of the indicators.
indicatorStyle: This class is used to specify the style of the indicators.

Syntax:

<p-carousel [value]="..">
    ...
</p-carousel>

Creating Angular application & Module Installation:

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Step 3: Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Project Structure: It will look like the following:

Example 1: In this example, we will see the basic usage of numVisible, numScroll, circular, and value of the Carousel Properties in Angular PrimeNG.

app.component.html

HTML

<div id="GFG">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h2>Carousel Properties</h2>

    <div style="width:50%; ">
        <p-carousel [value]="images" 
                    [numVisible]="1" 
                    [numScroll]="1" 
                    [circular]="true">
            <ng-template let-item pTemplate="item">
                <img [src]="item.previewImageSrc" 
                     alt="item.alt" 
                     width="500px">
            </ng-template>
        </p-carousel>
    </div>
</div>

app.component.ts

JavaScript

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    title = 'GFG';
    images: any[] = [
        {
            previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png',
            thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png',
            alt: 'Description for Image 1',
            title: 'Title 1'
        },
        {
            previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png',
            thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png',
            alt: 'Description for Image 2',
            title: 'Title 2'
        },
        {
            previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png',
            thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png',
            alt: 'Description for Image 3',
            title: 'Title 3'
        },
        {
            previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png',
            thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png',
            alt: 'Description for Image 4',
            title: 'Title 4'
        },

    ];
}

app.module.ts

JavaScript

import { NgModule } from '@angular/core';
import { BrowserModule } 
    from '@angular/platform-browser';
import { CarouselModule } from 'primeng/carousel';
import { AppComponent } from './app.component';
@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        CarouselModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output:

Example 2: In this example, we will see the showIndicators, showNavigators, circular, and orientation in Angular PrimeNG.

app.component.html

HTML

<div id="GFG">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h2>Carousel Properties</h2>

    <div style="width:50%; ">
        <p-carousel [value]="images" 
                    [numVisible]="1" 
                    [numScroll]="1" 
                    [circular]="true" 
                    [showIndicators]="true" 
                    [showNavigators]="true" 
                    orientation="vertical">
            <ng-template let-item pTemplate="item">
                <img [src]="item.previewImageSrc" 
                     alt="item.alt" 
                     width="500px">
            </ng-template>
        </p-carousel>
    </div>
</div>

app.component.ts

JavaScript

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    title = 'GFG';
    images: any[] = [
        {
            previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png',
            thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png',
            alt: 'Description for Image 1',
            title: 'Title 1'
        },
        {
            previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png',
            thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png',
            alt: 'Description for Image 2',
            title: 'Title 2'
        },
        {
            previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png',
            thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png',
            alt: 'Description for Image 3',
            title: 'Title 3'
        },
        {
            previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png',
            thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png',
            alt: 'Description for Image 4',
            title: 'Title 4'
        },

    ];
}

app.module.ts

JavaScript

import { NgModule } from '@angular/core';
import { BrowserModule } 
    from '@angular/platform-browser';
import { CarouselModule } from 'primeng/carousel';
import { AppComponent } from './app.component';
@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        CarouselModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }