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