Slick Carousel In Angular

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

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-in-Angular

Slick carousel on a small device:

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

Related Article:

Bootstrap Carousel in Angular

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments