How to Create Image Slider Using Angular

Create Image Slider Using Angular

In this article, you’ll learn how to create an image slider using Angular’s ngx-slick-carousel NPM library. It is also called as image carousels, is very useful to display multiple images to create a slide show.

Prerequisites

1] Angular 7
2] Bootstrap
3] HTML and CSS
4] ngx-slick-carousel library

Step 1

Create an Angular project by using the following command.

ng new ImageSlider

Step 2

Open this project in Visual Studio Code.

Let’s, open the integrated terminal by pressing Ctrl + ~ button. and install ngx-slick-carousel library and bootstrap by using following commands.

npm install slick-carousel –save    
npm install ngx-slick-carousel --save    
npm install bootstrap --save

Step 3

Open the angular.json file and add the required slick CSS file in ‘styles’.

"styles": [  
             "src/styles.css",  
             "node_modules/slick-carousel/slick/slick.scss",  
             "node_modules/slick-carousel/slick/slick-theme.scss"  
           ],  

add the required JS files in 'scripts'.

"scripts": [    
            "node_modules/jquery/dist/jquery.min.js",  
            "node_modules/slick-carousel/slick/slick.min.js"  
          ],  
Step 4
 
after that Configure the ngx-slick module in app.module.ts file. Let's import the required module in this file. 

import { BrowserModule } from '@angular/platform-browser';  
import { NgModule } from '@angular/core';  
import { AppRoutingModule } from './app-routing.module';  
import { AppComponent } from './app.component';  
import { SlickCarouselModule } from 'ngx-slick-carousel';  
@NgModule({  
  declarations: [  
    AppComponent  
  ],  
  imports: [  
    BrowserModule,  
    AppRoutingModule,  
    SlickCarouselModule  
  ],  
  providers: [],  
  bootstrap: [AppComponent]  
})  
export class AppModule { }

Step 5

Click on the src folder and right-click on the Assets folder. create a new folder under it and rename that to ‘images’ and add some samples images to this folder.

Assets image folderin angular

Step 6

After that, open the app.component.ts file and add the following lines with image urls,

.slick-slider {  
    width: 90%;  
    margin: auto;  
  }

Step 7

After that, open the app.component.ts file and add the following lines with image URLs.

We are going to add image-slider image URLs and then will transform that into angular-element.

Container for images and titles. An array containing the data Template to bind the data

import { Component } from '@angular/core';  
@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
})  
export class AppComponent {  
  images = [  
    { img: "../assets/images/1.jpg" },  
    { img: "../assets/images/2.jpg" },  
    { img: "../assets/images/3.jpg" },  
    { img: "../assets/images/4.jpg" },  
    { img: "../assets/images/5.jpg" },  
    { img: "../assets/images/6.jpg" },  
    { img: "../assets/images/7.jpg" },  
    { img: "../assets/images/8.jpg" },  
    { img: "../assets/images/9.jpg" },  
  ];  
  
  slideConfig = {  
    "slidesToShow": 3,  
    "slidesToScroll": 3,  
    "dots": true,  
    "infinite": true  
  };  
}  

Step 8

Now, open app.component.html and add the following HTML.

 <div>  
  <div class="row">  
    <div class="col-sm-12 btn btn-primary">  
      Image Slider  
    </div>  
  </div>  
</div>  
<hr style="background-color:black" />  
<div class="row">  
  <ngx-slick-carousel class="carousel" #slickModal="slick-carousel" [config]="slideConfig">  
    <div ngxSlickItem *ngFor="let image of images" class="slide">  
      <img src="{{ image.img }}" width="100%">  
    </div>  
  </ngx-slick-carousel>  
</div>

Now run the project and check the result.

Create Image Slider Using Angular

Leave a Reply

Your email address will not be published. Required fields are marked *