OWL Carousel in Angular Application

In this article, we learn how to integrate an owl Carousel in an angular application. For integration, we used “ngx-owl-carousel-o” npm package in our application.
OWL Carousel: It help full to display slider in our angular application. It supports most of the browsers.
Using of these plugin we get following benifits

  • Touch and Drag Support in Slider
  • Fully Responsive
  • Modern Browsers

Let’s create a new project for owl Carousel in angular for that you need to run the following command to create a project.


ng new angular-owl-demo

“angular-owl-demo” you need to write your application’s name. Then it will take some time to create the project. After successfully installing that, you need to go to their directory. For example “cd angular-owl-demo”. To Run angular applications, it required to run “ng serve”.
After that, we need to install the ngx-owl-carousel-o npm package in our application. run below command to install.


npm i ngx-owl-carousel-o

After install package we need to add CSS our application below line need to add “angular.json” file.


.........
"styles": [
   "node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.carousel.min.css",
   "node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.theme.default.min.css",
   "src/styles.scss"
],
...........

Import css in global style.scss.


@import '~ngx-owl-carousel-o/lib/styles/scss/owl.carousel';
@import '~ngx-owl-carousel-o/lib/styles/scss/owl.theme.default';

After we need to import and register CarouselModule and BrowserAnimationsModule services in the main app module class.app.module.ts file. Display in below code


....
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CarouselModule } from 'ngx-owl-carousel-o';
.....
@NgModule({
......
imports: [
   .......
    BrowserAnimationsModule,
    CarouselModule 
  ],
.......
})
......

In our component, we need to add the below code to easily implement the Carousel in angular.
Add the below code in “app.component.ts”


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 {
  title = 'owl-demo';
  dynamicSlides = [
    {
      id: 1,
      src:'https://via.placeholder.com/800/5342ac',
      alt:'Side 1',
      title:'Side 1'
    },
    {
      id: 2,
      src:'https://via.placeholder.com/800/8542ac',
      alt:'Side 2',
      title:'Side 2'
    },
    {
      id: 3,
      src:'https://via.placeholder.com/800/842acf',
      alt:'Side 3',
      title:'Side 3'
    },
    {
      id: 4,
      src:'https://via.placeholder.com/800/d32776',
      alt:'Side 4',
      title:'Side 4'
    },
    {
      id: 5,
      src:'https://via.placeholder.com/800/f66b97',
      alt:'Side 5',
      title:'Side 5'
    }
  ]

  constructor() { }

 customOptions: OwlOptions = {
   loop: true,
   mouseDrag: false,
   touchDrag: false,
   pullDrag: false,
   dots: false,
   navSpeed: 600,
   navText: ['&#8249', '›'],
   responsive: {
     0: {
       items: 1 
     },
     400: {
       items: 2
     },
     760: {
       items: 3
     },
     1000: {
       items: 4
     }
   },
   nav: true
 }
}

Add the below code in the “app.component.html” file.


<owl-carousel-o [options]="customOptions">

  <ng-container *ngFor="let slide of dynamicSlides">
    <ng-template carouselSlide [id]="slide.id">
      <img [src]="slide.src" [alt]="slide.alt" [title]="slide.title">
    </ng-template>
  </ng-container>

</owl-carousel-o>



After adding it display the below output in application.

Spread the love
  •  
  •  
  •  
  •  
  • 6
  •  
  •  
  •