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. ];
  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.