Create Image Slider Using Angular

In this article, you will learn how to create an image slider using angular.

In this article, we will learn how we can create an image slider using Angular's ngx-slick-carousel library. Image slider, also called image carousels, is very useful to display multiple images to create a slide show.
 

Prerequisites

  • Knowledge of Angular 2 or higher
  • Visual Studio Code
  • Node and NPM installed
Technologies we will use to build this demo
  • Angular 7
  • Bootstrap
  • HTML and CSS
  • ngx-slick-carousel library
Step 1
 
Create an Angular project by using the following command.
 
ng new ImageSlider
 
Create Image Slider Using Angular
 
Step 2
 
Open this project in Visual Studio Code.
 
Now, open the integrated terminal by pressing Ctrl + ~ and install ngx-slick-carousel library and bootstrap by using following commands
  1. npm install slick-carousel –save    
  2. npm install ngx-slick-carousel --save    
  3. npm install bootstrap --save   
Create Image Slider Using Angular
 
Now open the package.json file and check these packages installed in this project.
 
Create Image Slider Using Angular
 
Step 3
 
Open the angular.json file and include the required slick CSS file in 'styles'.
  1. "styles": [  
  2.              "src/styles.css",  
  3.              "node_modules/slick-carousel/slick/slick.scss",  
  4.              "node_modules/slick-carousel/slick/slick-theme.scss"  
  5.            ],  
Include the required JS files in 'scripts'.
  1. "scripts": [    
  2.             "node_modules/jquery/dist/jquery.min.js",  
  3.             "node_modules/slick-carousel/slick/slick.min.js"  
  4.           ],  
Step 4
 
Configure ngx-slick module in app.module.ts file. Let's import the required module in this file. 
  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3. import { AppRoutingModule } from './app-routing.module';  
  4. import { AppComponent } from './app.component';  
  5. import { SlickCarouselModule } from 'ngx-slick-carousel';  
  6. @NgModule({  
  7.   declarations: [  
  8.     AppComponent  
  9.   ],  
  10.   imports: [  
  11.     BrowserModule,  
  12.     AppRoutingModule,  
  13.     SlickCarouselModule  
  14.   ],  
  15.   providers: [],  
  16.   bootstrap: [AppComponent]  
  17. })  
  18. export class AppModule { }  
Step 5 
 
Expand the src folder and right-click on the Assets folder. Add a new folder under it and rename that to 'images' and add some demo images to this folder.  
 
Create Image Slider Using Angular
 
Step 6
 
Now, open app.component.css and add the following lines,
  1. .slick-slider {  
  2.     width: 90%;  
  3.     margin: auto;  
  4.   }  
Step 7
 
Now, open app.component.ts and add the following lines.
  1. import { Component } from '@angular/core';  
  2. @Component({  
  3.   selector: 'app-root',  
  4.   templateUrl: './app.component.html',  
  5.   styleUrls: ['./app.component.css']  
  6. })  
  7. export class AppComponent {  
  8.   images = [  
  9.     { img: "../assets/images/1.jpg" },  
  10.     { img: "../assets/images/2.jpg" },  
  11.     { img: "../assets/images/3.jpg" },  
  12.     { img: "../assets/images/4.jpg" },  
  13.     { img: "../assets/images/5.jpg" },  
  14.     { img: "../assets/images/6.jpg" },  
  15.     { img: "../assets/images/7.jpg" },  
  16.     { img: "../assets/images/8.jpg" },  
  17.     { img: "../assets/images/9.jpg" },  
  18.   ];  
  19.   
  20.   slideConfig = {  
  21.     "slidesToShow": 3,  
  22.     "slidesToScroll": 3,  
  23.     "dots"true,  
  24.     "infinite"true  
  25.   };  
  26. }  
Step 8
 
Now, open app.component.html and add the following HTML. 
  1. <div>  
  2.   <div class="row">  
  3.     <div class="col-sm-12 btn btn-primary">  
  4.       Image Slider  
  5.     </div>  
  6.   </div>  
  7. </div>  
  8. <hr style="background-color:black" />  
  9. <div class="row">  
  10.   <ngx-slick-carousel class="carousel" #slickModal="slick-carousel" [config]="slideConfig">  
  11.     <div ngxSlickItem *ngFor="let image of images" class="slide">  
  12.       <img src="{{ image.img }}" width="100%">  
  13.     </div>  
  14.   </ngx-slick-carousel>  
  15. </div>  
Now run the project and check the result.
 
Create Image Slider Using Angular
 

Summary

 
In this article, we learned how we can create an image slider using Angular.