Carousel in Angular

1. Carousel in Angular
2. Create Angular Carousel

We will introduce the angular-responsive-carousel and how to create a carousel using it.

Carousel in Angular

Nowadays, carousels are the most popular design elements used in websites by website developers. Carousels showcase information instantly in a visually appealing way to the end-users.

Angular material carousels display one or many images together. These images automatically rotate or rotate manually by button clicks or swipe from one frame to another.

And, these carousels can be created into horizontal and vertical orientations on the homepage or any other page.

Why Use Angular Carousels

Angular carousels are utilized by many companies like Ali Express, Amazon, and many other companies.

It is easy to gain users’ attention because these banners provide an overview of these websites. They are more appealing to them.

They act as marketing and advertising alternatives for websites. They also anticipate the user’s interests within a few seconds.

Ultimately, what looks good, sells well.

Create Angular Carousel

First of all, we will install the angular-responsive-carousel library. To install this library, we can use the command line.

# angular CLI
npm i angular-responsive-carousel

Once we have installed the library, we need to install the dependency for this library, tslib. So let’s install it as well with the command line.

# angular CLI
npm i tslib

In the next step, we need to import IvyCarouselModule in the app.module.ts and add IvyCarouselModule in imports inside our class.

So our app.module.ts will look like below.

# angular
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import {IvyCarouselModule} from 'angular-responsive-carousel';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports: [BrowserModule, FormsModule, IvyCarouselModule],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

In the next step, we will add our content in the app.component.html file.

# angular
<carousel>
  <div class="carousel-cell">
    <img
      src="https://images.pexels.com/photos/10358193/pexels-photo-10358193.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
    />
  </div>
  <div class="carousel-cell">
    <img
      src="https://images.pexels.com/photos/10358193/pexels-photo-10358193.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
    />
  </div>
  <div class="carousel-cell">
    <img
      src="https://images.pexels.com/photos/10358193/pexels-photo-10358193.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
    />
  </div>
</carousel>

Output:

We can use a carousel tag to make as many carousels as we want, and inside our carousel tag, we need to add images in a div with a class carousel-cell.

The best thing about this library is that we don’t have to do much work. We can import the library and add images using library classes, and it will make a fully working and responsive carousel for us.