Simple Steps To Use Angular 4 Image Slider Example [Bootstrap Carousel]

0

This article will help you to integrate Angular 4 image slider example in your apps.

NgbCarousel will be the easiest way to use bootstrap carousel in your angular apps.

I am assuming that you already have your app ready if not, visit and set up your first Angular 4 Hello World app.

Install ng-bootstrap with Angular 4

By using below command, you can install ng-bootstrap in your app to start using Bootstrap native components.

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

Now, we just need to import it in our main module.

//Import core modules
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
//Import ng-bootstrap module
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
//Import forms module
import {FormsModule} from '@angular/forms';
//Import app component
import { AppComponent } from './app.component';

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

Note: don’t forget to add bootstrap CSS in index.html.

Here, I am going to import bootstrap CDN URL for using CSS.

index.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

Angular 4 Slider Example

First of all, let’s set up the component where you would like to use the image slider.

It’s just a traditional app component.

/src/app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular 4 Image Slider Example';
}

Now, let’s use the slider and render it in our HTML template.

/src/app/app.component.html

<ngb-carousel>
  <ng-template ngbSlide>
    <img src="https://lorempixel.com/900/500?r=1" alt="Random first slide">
    <div class="carousel-caption">
      <h3>First slide label</h3>
      <p>First slide description.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <img src="https://lorempixel.com/900/500?r=2" alt="Random second slide">
    <div class="carousel-caption">
      <h3>Second slide label</h3>
      <p>Second slide description.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <img src="https://lorempixel.com/900/500?r=3" alt="Random third slide">
    <div class="carousel-caption">
      <h3>Third slide label</h3>
      <p>Third slide description.</p>
    </div>
  </ng-template>
</ngb-carousel>

Note: You can change the image URL based on your need. Also, you can loop it through in your app.

In addition, you can try some options to customize the slider.

Here we go! It’s easy to implement and use Angular 4 image slider.

I hope, you loved this article and it’s been helpful to you. Don’t forget to share!

Leave a Reply

Be the First to Comment!

avatar
  Subscribe  
Notify of