Angular 14 owl carousel slider. In this tutorial, we will learn how to integrate and use owl carousel in angular 14 apps using ngx-owl-carousel-o package.
Angular 14 Owl Carousel Tutorial Example
Use the following steps to integrate and use owl carousel slider in angular 14 apps; as follows:
- Step 1 – Create New Angular App
- Step 2 – Install OWL Carousel Library
- Step 3 – Import Modules in Module.ts File
- Step 4 – Use Owl Carousel Slider on View File
- Step 5 – Add Code On app.Component ts File
- Step 6 – Start the Angular App
Step 1 – Create New Angular App
First of all, open your terminal and execute the following command on it to install angular app:
ng new my-new-app
Step 2 – Install OWL Carousel Library
Then install NPM package called ngx-owl-carousel-o –save for implement owl carousel in angular apps. So, You can install the packages by executing the following commands on the terminal:
npm install jquery --save npm install ngx-owl-carousel-o
After that, open angular.json file and update the following code into it:
...
"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",
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
]
....
Step 3 – Import Modules in Module.ts File
Visit src/app directory and open app.module.ts file. And then add the following lines of into app.module.ts file:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CarouselModule } from 'ngx-owl-carousel-o';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
CarouselModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Step 4 – Use Owl Carousel Slider on View File
Use owl carousel in views in angular app. So, visit src/app/ and app.component.html and update the following code into it:
<h1>Angular 14 Owl Carousel Integration Tutorial - Tutsmake.com</h1>
<owl-carousel-o [options]="customOptions">
<ng-container *ngFor="let slide of slides">
<ng-template carouselSlide [id]="slide.id">
<img [src]="slide.img" >
</ng-template>
</ng-container>
</owl-carousel-o>
Step 5 – Add Code On app.Component ts File
Visit the src/app directory and open app.component.ts. Then add the following code into 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.css']
})
export class AppComponent {
title = 'ng-carousel-demo';
customOptions: OwlOptions = {
loop: true,
mouseDrag: false,
touchDrag: false,
pullDrag: false,
dots: false,
navSpeed: 700,
navText: ['', ''],
responsive: {
0: {
items: 1
},
400: {
items: 2
},
740: {
items: 3
},
940: {
items: 4
}
},
nav: true
}
slides = [
{id: 1, img: "https://dummyimage.com/350x150/423b42/fff"},
{id: 2, img: "https://dummyimage.com/350x150/2a2b7a/fff"},
{id: 3, img: "https://dummyimage.com/350x150/1a2b7a/fff"},
{id: 4, img: "https://dummyimage.com/350x150/7a2b7a/fff"},
{id: 5, img: "https://dummyimage.com/350x150/9a2b7a/fff"},
{id: 6, img: "https://dummyimage.com/350x150/5a2b7a/fff"},
{id: 6, img: "https://dummyimage.com/350x150/4a2b7a/fff"}
];
}
Step 6 – Start the Angular App
In this step, execute the following command on terminal to start angular owl carousel app:
ng serve
Recommended Angular Tutorials
