Best Angular carousel or Angular slider libraries

In web applications, or Angular carousel and Angular slider are interchangeable. Both are the same in most cases, we used common third parties libraries to create both. Angular carousel is a slideshow for cycling through a series of content, content can be image or text, or any other.

An angular slider or carousel is used for interactive content and visually appealing to the page content with slideshows and animations.

In this tutorial, we will discuss the different library of adding Angular slider or Angular carousel. First, we will list some of best available third parties libraries, and second, we’ll demonstrate some of it example. So let’s get started.

Best Angular carousel libraries in Angular.

As we have discussed that there are plenty of third parties libraries to implement Angular slider or carousel. We’ll list here some, you can select based on your requirement.

NameDescription
ng-bootstrap carouselThis component comes with an ng-bootstrap library, which we can use when we are using bootstrap for your Angular project UI.
ngx-owl-carousel-oThe ngx-owl-carousel-o is built for Angular >=6.0.0. It doesn’t use jQuery. This library has a size of 1.45 MB and a weekly download of 20,797 approximately.
angular-responsive-carouselThis library has a size of 814 kB and it has a weekly download of 9,134 approximately.
ng-image-sliderAn Angular responsive image slider with a lightbox popup. Also, support youtube and mp4 video URLs. It has 1.16 MB size and a weekly download of 5,027 approximately.

I have listed the above based on a recent update and the total number of downloads per week. There are other libraries for adding carousel and slides in Angular.

Setting up and configure Angular carousel project

Let first create our Angular slider or carousel project and we have three examples of Angular sliders. Run the following command to create our example project.

ng new carouselApp
cd carouselApp

Angular carousel example one using ngx-owl-carousel-o

We’ll demonstrate the Angular slider example using the third-party library ngx-owl-carousel-o. Here we first need to install this library in our project by following the command.

npm i ngx-owl-carousel-o --save

Here is a screenshot of Angular slider example 1.

Angular carousel example

In the Angular owl carousel example, we have two buttons that will allow us to navigate between images slides. We can also configure how many slides are to be displayed, width, height, autoplay, dot pagination, and more.

Let add the configuration of the Angular slide in the app.component.ts file.

import { Component } from '@angular/core';
import { OwlOptions } from 'ngx-owl-carousel-o';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  images = [
    { path: '../assets/images/1.jpeg', id: '1', title: 'Image 1' },
    { path: '../assets/images/2.jpeg', id: '2', title: 'Image 2' },
    { path: '../assets/images/3.jpeg', id: '3', title: 'Image 3' },
    { path: '../assets/images/4.jpeg', id: '4', title: 'Image 4' },
    { path: '../assets/images/5.jpeg', id: '5', title: 'Image 5' },
    { path: '../assets/images/6.jpeg', id: '6', title: 'Image 6' }
  ];

  customOptions: OwlOptions = {
    loop: true,
    autoplay: true,
    center: true,
    dots: false,
    navSpeed: 70,
    autoHeight: true,
    autoWidth: true,
    responsive: {
      0: { items: 2 },
      600: { items: 2 },
      1000: { items: 2 }
    }
  }

}

In the app.component.html template, we have added the #owlCar reference on the Angular owl carousel component. So that we can enable the previous and next buttons on the Angular owl carousel component. So that we can enable the previous and next buttons.

<div class="wrapper">
  <owl-carousel-o [options]="customOptions" #owlCar>
    <ng-container *ngFor="let slide of images">
      <ng-template carouselSlide>
        <img style="height: 500px" [src]="slide.path" [alt]="slide.id"[title]="slide.title">
      </ng-template>
    </ng-container>
  </owl-carousel-o>
</div>

<div class="center">
  <button role="presentation" class="owl-prev" (click)="owlCar.prev()">
   Previous
  </button>
  <button role="presentation" class="owl-next" (click)="owlCar.next()">
   Next
  </button>
</div>

Note: To customize the Angular slider item width and height, we need to add style for width and height inline or using the class name.

Angular carousel example two using angular-responsive-carousel

To use angular-responsive-carousel we need it to install it first and also import its module in the app.component.ts file.

npm i angular-responsive-carousel --save
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { IvyCarouselModule } from 'angular-responsive-carousel';

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

Here is our screenshot of Angular slider example 2.

Angular slider example

We have an images array object containing a list of images, which we iterate through an Angular slider.

images = [
  { path: '../assets/images/1.jpeg' },
  { path: '../assets/images/2.jpeg' },
  { path: '../assets/images/3.jpeg' },
  { path: '../assets/images/4.jpeg' },
  { path: '../assets/images/5.jpeg' },
  { path: '../assets/images/6.jpeg' }
];

Once we had a list of images, let now add this in our Angular carousel component.

<carousel [images]="images" [cellsToShow]="4" [loop]="true" [autoplay]="true"
 [autoplayInterval]="3000"></carousel>
<router-outlet></router-outlet>

Angular bootstrap carousel example

Last we’ll demonstrate how to use angular bootstrap carousel, as ng-bootstrap have a carousel component to implement it in our Angular, Here is a screenshot of our example of angular bootstrap carousel.

angular bootstrap carousel example

Let edit our component to add a carousel to our project.

<ngb-carousel *ngIf="images" class="text-lg-center">
  <ng-template ngbSlide>
    <div class="picsum-img-wrapper">
      <img [src]="images[0]" alt="Random first slide">
    </div>
    <div class="carousel-caption">
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <div class="picsum-img-wrapper">
      <img [src]="images[1]" alt="Random second slide">
    </div>
    <div class="carousel-caption">
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <div class="picsum-img-wrapper">
      <img [src]="images[2]" alt="Random third slide">
    </div>
    <div class="carousel-caption">
      <h3>Third slide label</h3>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
    </div>
  </ng-template>
</ngb-carousel>

Add image array object in component typescript file as below.

  images = [944, 1011, 984].map((n) => `https://picsum.photos/id/${n}/900/500`);

Note: We need to add class=”text-lg-center” to the carousel component so we can make the ng-bootstrap carousel center.

Related Articles

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top