Carousel Slider In Angular

The Code Points September 04, 2022 0

In this article, we will learn how to add a responsive carousel slider in an angular application.

So, let's start with the implementation

First, we need to create a new angular application using the following command in the terminal.

ng new carousel-angular

Now, we need to install the ngx-owl-carousel, owl.carousel and jquery npm package using the following command

npm install ngx-owl-carousel owl.carousel jquery

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

Now, we need to add CSS and Js references to all the packages in the angular.json file.

"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"
]

Now, we need to add OwlModule into the app.module.ts file using the following code.

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 { }

Now, add the following code under the app.component.ts file.

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'
  ];

}

Now, using the following code adds the owl-carousel component under the app.component.html file.

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

Now, run the application using the ng serve command into the terminal and see the browser screen we are able to show the carousel slider and easily move to the next and previous slide.

Conclusion

In this article, we learned how to add a responsive carousel slider in the angular application using the ngx-owl-carousel package.

I hope this article helps you and you will like it.👍

Please give your valuable feedback and comments or suggestion in the comment section

If you have any doubt or confusion then free to ask in the comment section.