Angular 16 owl carousel slider. In this tutorial, i am going to show you how to create carousel using owl carousel in Angular 16 apps.
Angular 16 Owl Carousel Example
Follow the below given steps to create carousel using owl carousel slider in Angular 16 apps:
- 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
Run the following command on it to install angular app:
ng new my-new-app
Step 2 – Install OWL Carousel Library
Run the following command on command prompt to install owl carousel packages:
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
Go to 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
Go to src/app/ and app.component.html and update the following code into it:
<h1>Angular 16 Owl Carousel Integration Tutorial - laratutorials.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
Go to 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
Run the following command on terminal to start angular owl carousel app:
ng serve