ngx-bootstrap CarouselModule not working

Question

I am trying to use carousel module in my angular2 application. here is my app.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {CarouselModule}  from 'ngx-bootstrap/carousel';
import { AppComponent } from './app.component';
import {AppRoutesModule} from './app.routes';
import { NavbarComponent } from './shared/components/navbar/navbar.component';

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

Bellow is my home.component.ts and home.component.html in which i am using the module

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

HTML File

<carousel>
  <slide>
    <img src="assets/images/wedding.jpg" alt="First slide" style="display: block; width: 100%;">
  </slide>
  <slide>
    <img src="assets/images/birthday.jpg" alt="Second slide" style="display: block; width: 100%;">
  </slide>
  <slide>
    <img src="assets/images/anniversary.jpg" alt="Third slide" style="display: block; width: 100%;">
  </slide>

when I am running the code it throwing following error.

'slide' is not a known element: 1. If 'slide' is an Angular component, then verify that it is part of this module. 2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" [ERROR ->]

Any help would be appriciated

Answer 1

Change

From

import {CarouselModule}  from 'ngx-bootstrap/carousel';

To

import { CarouselModule } from 'ngx-bootstrap';

Because import { CarouselModule } from 'ngx-bootstrap/carousel'; does not work with system.js

also add it under EventModule imports. And import EventModule inside app.module.ts

Answer 2

I don't know who through the same problem but here is the issue

in your homecomponnent.ts

import { CarouselConfig } from 'ngx-bootstrap/carousel';

and in your @component add this line

providers: [ { provide: CarouselConfig, useValue: { interval: 2500, noPause: true, showIndicators: true } } ] })

if you want to change the second of the slide you just need to change the interval number