Angular PrimeNG Carousel Styling

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 Styling.

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 with different styling options that can be used to create dynamic carousels, along with enhancing the overall user experience.

Carousel Styling

• p-carousel: It acts as a container element for the Carousel.
• p-carousel-header: It is a header section of the Carousel.
• p-carousel-footer: It is a footer section of the Carousel.
• p-carousel-content: It is the main content, which contains a viewport container.
• p-carousel-container: It acts as a viewport container that contains navigation buttons and a viewport.
• p-carousel-items-content: It renders the Viewport.
• p-carousel-dots-container: It acts as a container of the paginator.
• p-carousel-dot-item: It is a paginator element.
• p-carousel-dot-icon: It is a paginator element icon.

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: This example describes the basic usage of the Carousel Styling with the help of the p-carousel in Angular PrimeNG.

• 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.component.html

HTML

<div id="GFG">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h2>Carousel Styling</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.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: This is another example that describes the basic usage of the Carousel Styling with the help of the p-carousel-header and p-carousel-footer in Angular PrimeNG.

• 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.component.html

HTML

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

    <div style="width:50%; ">
        <p-carousel [value]="images"
                    [numVisible]="1"
                    [numScroll]="1"
                    [circular]="true">
            <ng-template pTemplate="header">
                <h3 style="color:red">
                    I am a Header of Carousel
                </h3>
            </ng-template>
            <ng-template let-item pTemplate="item">
                <img [src]="item.previewImageSrc"
                     alt="item.alt"
                     width="500px">
            </ng-template>
            <ng-template pTemplate="footer">
                <h3 style="color:red">
                    I am a Footer of Carousel
                </h3>
            </ng-template>
        </p-carousel>
    </div>
</div>

• 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:

Reference: http://primefaces.org/primeng/carousel