how to use bootstrap 4 carousel in angular 5 | 6

how to use  carousel in angular 5 | 6

In this video tutorial, I implemented a bootstrap 4 carousel in angular 6 project. first I told you that how we can upgrade angular 5 to angular 6 packages, how we can install NG Bootstrap repository in our current angular project.

Update angular 5 to angular 6

we may update angular 5 projects into angular 6 projects by running the following command.

ng update @angular/cli 
ng update @angular/core

ng update @angular/cli --migrate-only --from=1.7.4

install ng bootstrap in angular 6

npm install --save @ng-bootstrap/ng-bootstrap

Note:  Abobe command will add the latest version of the ng-bootstrap repository in your current project If you are using 4 or 5 in that condition you have to specify the ng bootstrap version accordingly.

Pass reference of ng bootstrap repository into app.module.ts

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

imports: [
    BrowserModule , NgbModule
  ],

Create new component(here is slider)

ng g c slider --is --it

Pass reference of new slider component into app.component.html

<app-slider></app-slider>

Add following code into slider.component.html and slider.component.ts

import { Component, OnInit } from '@angular/core';
import { NgbCarouselConfig } from '@ng-bootstrap/ng-bootstrap';
@Component({
  selector: 'app-slider',
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.css'],
  providers: [ NgbCarouselConfig ]
})
export class SliderComponent implements OnInit {

  constructor(config: NgbCarouselConfig) {
    // customize default values of carousels used by this component tree
    config.interval = 2000;
    config.wrap = true;
    config.keyboard = false;
    config.pauseOnHover = false;
  }


  ngOnInit() {
  }

}

<div class='container-fluid'>

  <div class='col-12'>
  <ngb-carousel>
  <ng-template ngbSlide>
    <img src="../assets/img/3.jpg" alt="Random first slide">
    <div class="carousel-caption">
      <h3>10 seconds between slides...</h3>
      <p>This carousel uses customized default values.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <img src="../assets/img/slider-02.jpg" alt="Random second slide">
    <div class="carousel-caption">
      <h3>No mouse events...</h3>
      <p>This carousel doesn't pause or resume on mouse events</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <img src="../assets/img/Corporate-Training.jpg" alt="Random third slide">
    <div class="carousel-caption">
      <h3>No keyboard...</h3>
      <p>This carousel uses customized default values.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <img src="../assets/img/slider-02.jpg" alt="Random fourth slide">
    <div class="carousel-caption">
      <h3>And no wrap after last slide.</h3>
      <p>This carousel uses customized default values.</p>
    </div>
  </ng-template>
</ngb-carousel>
  </div>
 
  </div>
  

 

Create “img” folder into assets directory and add images

img{
    width: 100%;
    height: 400px;
}

Run project using “ng serve –open”

 

Output: