Home Angular7 How to Implement Owl Carousel Slider in Angular 7?

How to Implement Owl Carousel Slider in Angular 7?

by therichpost
19 comments
angular7

Hello to all, welcome to therichpost.com. Today In this post, I will tell you, How to Implement Owl Carousel Slider in Angular 7?

I am very happy during sharing this post. I faced some error but no one will face any error with my code.

Slider are the main part of lading page and today we will implement Owl carousel Slider in Angular 7.

Here is the working picture:

 

How to Implement Owl Carousel Slider in Angular 7

 

Here is the complete working and tested code, you need to follow:

 

1. Very first, here are common basics steps to add angular 7 application on your machine:

$ npm install -g @angular/cli

$ ng new angularowlslider // Set Angular7 Application on your pc

cd angularowlslider // Go inside project folder

ng serve // Run project

http://localhost:4200/  //Check working Local server

 

2. Now run below command into your terminal to include owl carousel package into your angular 7 application:

npm i ngx-owl-carousel-o

 

3. Now, add below code into your 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.sass" or "src/styles.css"
  ],
....

 

4. Now add below code into your app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CarouselModule } from 'ngx-owl-carousel-o';
import { AppComponent } from './app.component';
import { Routes, RouterModule } from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CarouselModule,
    BrowserAnimationsModule,
     RouterModule.forRoot([]),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

5. Now add below code into your 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 = 'angularowlslider';
  customOptions: any = {
    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
  }
}

 

6. Finally add, below code into your app.component.html file:

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <div>Some tags before</div>
    <owl-carousel-o [options]="customOptions">
    <ng-template carouselSlide><img src="https://jaxenter.de/wp-content/uploads/2016/01/angularjs_2_0-log-500x375.jpg"></ng-template>  
    <ng-template carouselSlide><img src="https://jaxenter.de/wp-content/uploads/2016/01/angularjs_2_0-log-500x375.jpg"></ng-template>  
    <ng-template carouselSlide><img src="https://jaxenter.de/wp-content/uploads/2016/01/angularjs_2_0-log-500x375.jpg"></ng-template> 
    <ng-template carouselSlide><img src="https://jaxenter.de/wp-content/uploads/2016/01/angularjs_2_0-log-500x375.jpg"></ng-template>  
    <ng-template carouselSlide><img src="https://jaxenter.de/wp-content/uploads/2016/01/angularjs_2_0-log-500x375.jpg"></ng-template>  
  </owl-carousel-o>
  <div>Some tags after</div>
</div>

This is it. Please follow the code and you will not face any kind of error.

If you have any query related to this post then please do comment below or ask question.

Thank you,

Jas

TheRichPost

You may also like

19 comments

sam February 20, 2019 - 5:23 am

Great, it worked for me..

Reply
Ajay Malhotra February 20, 2019 - 4:22 pm

Thank you Sam.

Reply
Shruthi Ashok March 3, 2019 - 6:11 pm

Hi! I am trying to make changes to the default owl carousel modules. For example, I want to move the nav buttons to the right end of the screen. Instead of them being in the center. However, I am not able to override the default .owl-theme .owl-nav in the module files.

Is it possible to override those?

Reply
Ajay Malhotra March 4, 2019 - 4:49 pm

Okay sure and I will update you soon.

Reply
jasmeen March 7, 2019 - 10:22 am

Good Post.

Reply
Ajay Malhotra March 13, 2019 - 7:33 am

Thnak you Jasmeen.

Reply
nalin March 13, 2019 - 7:29 am

Nice Post …works perfectly .Thank you !

Reply
Ajay September 2, 2019 - 9:10 am

Thank you

Reply
Prashant Kumar Srivastava April 22, 2019 - 8:54 am

Hi,
My carousel slider is not working and layout is also coming destroyed.

Reply
Jassa September 2, 2019 - 9:02 am

Hi, please show me the error.

Reply
Pham Gia Thinh November 8, 2019 - 10:51 am

Slider always 3 items, even i set items:1 🙁

Reply
Leonardo Airam February 12, 2020 - 12:26 pm

I want to stylish those next and prev button, is this possible?

Reply
Ajay Malhotra February 12, 2020 - 4:01 pm

Yes you can do that.

Reply
Sudip September 18, 2020 - 6:53 am

It worked for me

Reply
Ajay Malhotra September 18, 2020 - 6:55 am

Great Sudip 🙂

Reply
Nayeem December 16, 2020 - 8:13 am

is it possible to set single image slide

Reply
Ajay Malhotra December 16, 2020 - 10:54 am

yes just add I to each setting:
responsive: {
0: {
items: 1
},
400: {
items: 1
},
740: {
items: 1
},
940: {
items: 1
}
},

Reply
Anil Kumar July 29, 2022 - 4:54 am

Is it compatible for Angular version 7.0.1 ? I m facing error.

Reply
therichpost July 29, 2022 - 8:22 am

Yes

Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.