Carousels Example 1 in angular 6/7

Carousels Example 1 in angular 6/7

Carousels

npminstall@angular/cli@latest

First Create angular project

Now create a new Angular Project by running following commands

ngnewNG7Carousel

Install Carousel Package in Application

npm install ng2-carouselamos--save

app.module.ts

import { BrowserModule } from'@angular/platform-browser';

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

import { AppComponent } from'./app.component';

import { Ng2CarouselamosModule } from'ng2-carouselamos';

import { from } from'rxjs';

@NgModule({

declarations: [ AppComponent ],

imports: [ BrowserModule, Ng2CarouselamosModule ],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

app.component.html

<div class="container">

<div ng2-carouselamos class="slides-wrapper"

    [items]="images"

    [width]="850"

    [$prev]="prev"

    [$next]="next"

    [$item]="item">

</div>

<ng-template #prev>

<img src="assets/images/left.png"id="left">

</ng-template>

<ng-template #next>

<img src="assets/images/next.png"id="next">

</ng-template>

<ng-template #itemlet-itemlet-i="index">

<div class="slide-items">

<img src="{{item.name}}">

</div>

</ng-template>

</div>

ng2-carouselamos: It is the directive for the carousel.
[items]: Will have the object of items which we will define in home.ts.
[width]: Width of carousel taking value in Pixels.
#prev & #next having templates for next and previous buttons.
#item defines the HTML template for each item which will iterate using items object.

app.component.ts

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

@Component({

selector:'app-root',

    templateUrl:'./app.component.html',

    styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'NG7Carousel';

images: Array<any> = []

constructor() {

this.images = [

      {name :"https://upload.wikimedia.org/wikipedia/commons/thumb/8/88/Raja_Ravi_Varma_-_Woman_Holding_a_Fruit_-_Google_Art_Project.jpg/465px-Raja_Ravi_Varma_-_Woman_Holding_a_Fruit_-_Google_Art_Project.jpg"},

      {name :"https://upload.wikimedia.org/wikipedia/commons/6/69/Raja_Ravi_Varma%2C_Lady_with_Fruits.jpg"},

      {name :"https://raakheeonquora.files.wordpress.com/2016/11/dce74ce642e2f17140951a9d37d2b01c.jpg"},

      {name :"https://5.imimg.com/data5/LY/OP/MY-42593726/raja-ravi-varma-paintings-canvas-prints-500x500.jpg"},

      {name :"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRqvyiG627y4HPqfKRxsqoXvxiWOM7rAwH9M4naK86-q9TVAgFn"},

      {name :"https://images-na.ssl-images-amazon.com/images/I/91daG5ZJASL._SY679_.jpg"},

      {name :"https://images-na.ssl-images-amazon.com/images/I/717FF2gZaEL._SY606_.jpg"},

      {name :"https://cdn.dollsofindia.com/images/p/ravi-verma-prints/maharashtrian-lady-GX92_l.jpg"},

      {name :"https://render.fineartamerica.com/images/rendered/default/poster/8/10/break/images-medium-5/indian-girl-after-bath-raja-ravi-varma.jpg"},

      {name :"https://cdn.dollsofindia.com/images/p/ravi-verma-prints/bathing-lady-OW18_l.jpg"},

      {name :"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSbdGTgaSv1Wp-JNi-tuD0F3Sqo6XCuUIn5bi8LX2FTKLqBSsvyKw"},

      {name :"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQjGhex2s2VuI9d1VhpxYElMItusSrXDj4dwJo8Wvsg8irpCztv"},

      {name :"https://www.wcdf-france.com/wp-content/uploads/raja-ravi-varma-god-paintings-25-best-raja-ravi-varma-paintings-18th-century-indian.jpg"},

      {name :"https://images.livemint.com/rf/Image-621x414/LiveMint/Period2/2018/03/21/Photos/Processed/raja-kaCC--621x414@LiveMint.jpg"},

      {name :"https://tiimg.tistatic.com/fp/2/906/raja-ravi-varma-paintings-627.jpg"},

      {name :"https://4.imimg.com/data4/VX/JE/MY-3610322/ravi-varma-paintings-500x500.jpg"},

    ];

  }

}

app.component.css

#container {

width: 100%;

margin: 5em auto;

padding: 0;

}

.ng2-carouselamos-container{

width: 70%;

margin: auto;

    }

.slide-items{

margin-right: 10px;

    }

.slide-items img{

width: 210px;

height: 210px;

margin-right: 10px;

    }

Output