To incorporate owl carousel in an Angular project based on npm, follow the steps below:
Step 1: Install npm module
npm install --save owl.carousel
npm install jquery
Step 2: Include JavaScript files in the angular-cli.json scripts section and declare them.
"styles": [
"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"
],
Step 3: Add HTML CODE
<div class="owl-carousel" #carousel>
<div> Your Content 1 </div>
<div> Your Content 2 </div>
<div> Your Content 3 </div>
<div> Your Content 4 </div>
<div> Your Content 5 </div>
<div> Your Content 6 </div>
<div> Your Content 7 </div>
</div>
For Jquery integration
declare var $: any;
Then utilize .owlCarousel({...} to apply owlCarousel.
Step 4: Update Component.ts
import { Component, AfterContentInit, ViewChild, ElementRef } from '@angular/core';
declare var $: any;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterContentInit{
@ViewChild('carousel') el:ElementRef;
ngAfterContentInit(): void {
console.log(this.el);
$(this.el.nativeElement).owlCarousel();
}
}
Visit the Github Link for a functional example.