In this article, you will learn how to use a slick carousel in angular. A slick carousel is an image slider that is used to show multiple images in slideshow representation. You will learn to use a slick carousel in angular using the ngx-slick-carousel npm package. The slick carousel is very easily and quickly configurable.
You will learn the following points about slick carousel:
Installing and using slick carousel:
Installing and using a slick carousel is very easy and quick. Follow the below steps to start using a slick carousel.
Step 1: Creating an angular project
Create an angular project using the following command:
ng new imageslider
Step 2: Installing npm packages
Install required npm packages using the following commands:
npm install jquery –save
npm install slick-carousel –save
npm install ngx-slick-carousel –save
Step 3: Importing SlickCarouselModule in AppModule
Now you have to import SlickCarouselModule into AppModule. Put the following code in the app.module.ts 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 4: Adding CSS and JS file paths in the angular.json file :
Now you have to add slick CSS. Put slick CSS file paths in the ‘styles’ array of the angular.json file.
"styles": [
"node_modules/slick-carousel/slick/slick.scss",
"node_modules/slick-carousel/slick/slick-theme.scss"
]Now add jquery and slick js files into the ‘scripts’ array of the angular.json file.
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/slick-carousel/slick/slick.min.js"
] Step 5: Using Slick component in application:
Once the above installing of packages and importing of the module, CSS, and JS files is done then you can use slick carousels components, directives, and pipes in your application.
Add the following code in the app.component.html file.
<ngx-slick-carousel class="carousel"
#slickModal="slick-carousel"
[config]="slideConfig"
(init)="slickInit($event)"
(breakpoint)="breakpoint($event)"
(afterChange)="afterChange($event)"
(beforeChange)="beforeChange($event)">
<div ngxSlickItem *ngFor="let image of images" class="slide">
<img src="{{ image.img }}" alt="" width="100%">
</div>
</ngx-slick-carousel>
<div style="text-align: center; margin-top: 45px;">
<button (click)="addSlide()">Add Slide</button>
<button (click)="removeSlide()">Remove Slide</button>
<button (click)="slickModal.slickGoTo(2)">slickGoto 2</button>
<button (click)="slickModal.unslick()">unslick</button>
</div>Add the following code in the app.component.ts file.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'imageslider';
images = [
{img: "https://images.unsplash.com/photo-1564832586408-3b10f4f41541?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=890&q=80"},
{img: "https://images.unsplash.com/photo-1483422166412-1d8a821cd97c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80"},
{img: "https://images.unsplash.com/photo-1626285840323-788f8d8764a5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=749&q=80"},
{img: "https://images.unsplash.com/photo-1542160218-749bcb26e84c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=750&q=80"},
{img: "https://images.unsplash.com/photo-1624559766030-9a4785d5a23c?ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDEzMXw2c01WalRMU2tlUXx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"}
];
slideConfig = {"slidesToShow": 3, "slidesToScroll": 1, "dots": true, "infinite": true};
addSlide() {
this.images.push({img: "https://images.unsplash.com/photo-1581924498057-96568f743589?ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDEzN3w2c01WalRMU2tlUXx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"})
}
removeSlide() {
this.images.length = this.images.length - 1;
}
slickInit(e) {
console.log('slick initialized');
}
breakpoint(e) {
console.log('breakpoint');
}
afterChange(e) {
console.log('afterChange');
}
beforeChange(e) {
console.log('beforeChange');
}
}Add the following CSS in the styles.css file to add navigation buttons.
.slick-slider {
width: 88%;
margin: auto;
background: rgb(14, 13, 13);
}
body .slick-prev,
body .slick-next {
height: 45px;
width: 40px;
background: grey !important;
z-index: 100;
}Step 6: Run your application
Run your application using the following command and open your application on the browser.
ng serve
You will see slick carousel output.
Setting Configuration for slick carousel:
1) Setting “dots”: false in slideConfig will remove dots on the slider.
2) Setting “infinite”: true in slideConfig will stop the slider once it is reached to the last image. It will stop moving images repeatedly.
3) You can also set autoplay for a slick carousel. You have to set autoplay and autoplaySpeed properties in slideConfig. Replace the following slideConfig object with the previous slideConfig object to see autoplay functionality.
slideConfig = {
"slidesToShow": 3,
"slidesToScroll": 1,
"dots": true,
"infinite": true,
"autoplay" : true,
"autoplaySpeed" : 1000
};Output:
4) You can also set responsiveness to a slick carousel. You can set different properties for different screen sizes. Replace the following slideConfig object with the previous slideConfig object to see responsiveness functionality. You can also add your own multiple breakpoints to increase responsiveness.
slideConfig = {
"slidesToShow": 3,
"slidesToScroll": 1,
"dots": true,
"infinite": true,
"autoplay" : true,
"autoplaySpeed" : 1000,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
},
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
},
}
]
};Output:
As breakpoints are set, only one image can be seen on small devices and three images will be visible on large devices. You can slide to the next images using navigation buttons.
Slick Carousel on a large device:
Slick carousel on a small device:
If you want to images variable as dynamic, use trackBy in *ngFor syntax. It will minimize ngxSlickItem directive recreation.
Conclusion:
You learned how to use a slick carousel in angular. You also learned some notes related to a slick carousel that will be useful. You also learned alternate ways for adding image sliders in angular.
