Building Responsive Carousel Slider In Angular 9

In this article, we will learn how to build a responsive carousel slider in Angular 9.

The Carousel plugin is a component for cycling through elements, like a slideshow.

Prerequisites:

• Basic knowledge of Angular
• Code editor like Visual Studio Code

Create a new Angular project by typing the following command in the VSCode terminal.

ng new carousel

Now, open the newly created project and execute the command given below.

npm install ngx-owl-carousel owl.carousel jquery

It will install 3 different packages:

• ngx-owl-carousel is used for the rich carousel feature of jQuery to get integrated with Angular.
• owl.carousel is the main package where the actual task performs.
• jquery is needed for the main Owl carousel to work.

Now, we have to reference all packages path in the angular.json file.

Note: Make sure you reference it under the build node.

"styles": [
  "src/styles.css",
  "./node_modules/owl.carousel/dist/assets/owl.carousel.min.css",
  "./node_modules/owl.carousel/dist/assets/owl.theme.default.min.css"
],
"scripts": [
  "./node_modules/jquery/dist/jquery.min.js",
  "./node_modules/owl.carousel/dist/owl.carousel.min.js"
]

Open the app.module.ts file and add the code in it.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { OwlModule } from 'ngx-owl-carousel';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

Open the app.component.ts file and add the code in it.

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

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

  slideOptions = {
    nav: true,
    dots: true,
    loop: false,
    margin: 10,
    responsiveClass: true,
    // responsive object contains responsive options.
    responsive: {
      0: {
        items: 1,
        dots: false
      },
      600: {
        items: 3
      },
      1000: {
        items: 4
      }
    }
  };

  images = [
    'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQGpg4fYucfTrzefpz53O7sG3TMm76s8FkNnoc0kViB0bOflsO8&s',
    'https://img.freepik.com/free-photo/macro-picture-half-soap-bubble-look-like-planet-space_58717-343.jpg?size=626&ext=jpg',
    'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYgtlo6yCU3PuboMjxF1n5eQ2SXch8htElZEwaB9dN0AGiA-Vm&s',
    'https://wallpaperaccess.com/full/1622642.jpg',
    'https://wallpapers.moviemania.io/phone/movie/299534/89d58e/avengers-endgame-phone-wallpaper.jpg?w=1536&h=2732',
    'https://wonderfulengineering.com/wp-content/uploads/2016/02/wallpaper-background-2.jpg',
    'https://cutewallpaper.org/21/wallpaper-images-hd/Nature-Wallpapers-Pexels-Free-Stock-Photos.jpeg'
  ];

}

Open the app.component.html file and add the code in it.

<owl-carousel [options]="slideOptions" [carouselClasses]="['owl-theme', 'sliding']">
  <div class="item" *ngFor="let image of images">
    <div>
      <img [src]="image" height="200px">
    </div>
  </div>
</owl-carousel>

Output:

Please give your valuable feedback and if you have any questions or issues about this article, please let me know.

Also, check How To Implement Lazy Loading Module In Angular 9