Owl Carousel with Angular

    Apr 08, 2019       by Pankaj Kumar
owl-carousel-angular-app.jpg

Today I am going to create a demo of owl carousel with angular 6. This is one of the very common topics while working on web application development. 

 

Let's Get Started

If you have not installed Angular latest version in your system then read getting started with angular. 

 

Now let's proceed to create the demo.

Step 1: Create Angular App

Create a new angular app by typing below command over terminal

ng new owl-carousel

 

Step2: install dependencies

Now after the successfull app creation, Move to the project folder with cd owl-carousel/   and install required npm packages.

npm install ngx-owl-carousel owl.carousel jquery --save

 

In the above command we have installed 3 npm packages,  ngx-owl-carousel is used for rich carousel feature of jQuery to get integrated with Angular. Owl.carousel is the main package where the actual task performs. jQuery is needed for main Owl carousel to work.

 

Step 3: Add library files in angular.json

In angular.json at root of the project, add library script and styles like below:

 

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

 

Step 4: Update app.module.ts file

import { OwlModule } from 'ngx-owl-carousel';

// Add OwlModule to imports at below section

imports: [

BrowserModule,

OwlModule

],

 

Step 5: Update app.component.ts file

 

 
import { Component } from '@angular/core';
 
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'owl-carousel';
 
mySlideImages = ['../assets/images/image1.jpg','../assets/images/image2.jpeg','../assets/images/image3.jpg'];
myCarouselImages =['../assets/images/image1.jpg','../assets/images/image2.jpeg','../assets/images/image3.jpg'];
 
mySlideOptions={items: 1, dots: true, nav: true};
myCarouselOptions={items: 3, dots: true, nav: true};
}


 

 

In  the above code we have generated a static array of images we will have in owl-carousel. Also   we have updated here the default setting of the slider.

 

Step 6: Update app.component.html file

 

 
<owl-carousel [options]="mySlideOptions" [items]="images" [carouselClasses]="['owl-theme', 'sliding']" >
<div class="item" *ngFor="let image of mySlideImages;let i = index">
<div>
<img src={{image}}/>
</div>
</div>
</owl-carousel>
 

 

Conclusion

In this demo, we used the npm packages for owl-carousel. Find the official documentation here.

That’s all for now. Thank you for reading and I hope this post will be very helpful for integrating owl carousel in angular app.

Let me know your thoughts over the email demo.jsonworld@gmail.com. I would love to hear them and If you like this article, share with your friends.

 

Find complete source code over GitHub

angular owl carousel

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch

Find other similar Articles here:

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch
CATEGORIES
INTERVIEW QUESTIONS