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 the ngx-slick-carousel library and bootstrap by using the 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 with 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 code for Image Slider.

 <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 *