Angular 13 Slick Carousel/Slider Integration Tutorial

Angular 13 Slick carousel tutorial; this quick tutorial helps you learn how to integrate a fully responsive slick carousel/slider in the angular app using the npm ngx-slick-carousel library.

The ngx-slick-carousel is a great carousel library, which is exclusively built for angular 7+ versions, ngx slick offers fully responsive support, and you can implement server-side rendering with it also.

It offers great flexibility, allowing you to extend the customization for specific features. Using it in angular is simple; install it, register the slick theme and library CSS, and add some external jQuery scripts evoke the slick carousel.

Angular 13 Slick Carousel Integration Example

We, start with installing the ngx-slick-carousel package into angular, configure the slick carousel module in angular’s main app module file. Define the slick carousel directive in the angular component and some custom functions to invoke the slick slider.

• Step 1: Install Angular App
• Step 2: Install Slick Library
• Step 3: Add Slick CSS and Script
• Step 4: Add Slick Carousel Module
• Step 5: Add Slick Carousel in Angular
• Step 7: Run Angular App

Install Angular App

Evoke the angular development process by installing angular CLI:

npm install -g @angular/cli

Further, create a new angular app with following command:

ng new ng-carousel-demo

Head over to the project folder:

cd ng new ng-carousel-demo

Install Slick Library

Once the project is installed, use the following three npm commands to install jQuery, slick carousel, and ngx-slick-carousel into the angular app.

 npm install jquery 
 npm install slick-carousel
 npm install ngx-slick-carousel --force

Add Slick CSS and Script

In the further step, you have to include slick CSS in styles array, similarly include jQuery and slick JS in scripts array.

Update the following code in angular.json file:

"styles": [
    "src/styles.scss",
    "node_modules/slick-carousel/slick/slick.scss",
    "node_modules/slick-carousel/slick/slick-theme.scss"
],
"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/slick-carousel/slick/slick.min.js"
]

Add Slick Carousel Module in Main Module

In the next step add SlickCarouselModule to applications main app module, hence add and update the following code in app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { SlickCarouselModule } from 'ngx-slick-carousel';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, SlickCarouselModule],
  providers: [],
  bootstrap: [AppComponent],
})

export class AppModule {}

Implement Touch Content Slider

You can quickly implement slick slider using the ngx-slick-carousel directive, add required events and properties, use the ngFor directive to iterate over the slide collection.

Update the following code in 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 slide of slides" class="slide">
<img src="{{ slide.img }}" alt="" width="100%">
</div>
</ngx-slick-carousel>

<button (click)="addSlide()">Add</button>
<button (click)="removeSlide()">Remove</button>
<button (click)="slickModal.slickGoTo(2)">slickGoto 2</button>
<button (click)="slickModal.unslick()">unslick</button>

You have to set up the events and methods you declared in the HTML template to invoke the slider.

Update the following code in app.component.ts file:

import { Component } from '@angular/core';
    
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  slides = [
    { img: 'https://via.placeholder.com/600.png/09f/fff' },
    { img: 'https://via.placeholder.com/600.png/021/fff' },
    { img: 'https://via.placeholder.com/600.png/321/fff' },
    { img: 'https://via.placeholder.com/600.png/422/fff' },
    { img: 'https://via.placeholder.com/600.png/654/fff' },
  ];
  slideConfig = { slidesToShow: 4, slidesToScroll: 4 };

  addSlide() {
    this.slides.push({ img: 'http://placehold.it/350x150/777777' });
  }

  removeSlide() {
    this.slides.length = this.slides.length - 1;
  }

  slickInit(e: any) {
    console.log('slick initialized');
  }

  breakpoint(e: any) {
    console.log('breakpoint');
  }

  afterChange(e: any) {
    console.log('afterChange');
  }

  beforeChange(e: any) {
    console.log('beforeChange');
  }

  constructor() {}

  ngOnInit(): void {}
}

Lastly, include the styling to create the custom navigation arrows, add the following code in the mentioned below path.

Open and update the following code in src/styles.css file:

.slick-slider {
    width: 88%;
    margin: auto;
    background: rgb(14, 13, 13);
  }
  
body .slick-prev, 
body .slick-next {
    height: 45px;
    width: 40px;
    background: grey ;
    z-index: 100;
}

Start Angular Project

Now, open console and execute command and wait for development server to be started:

ng serve

Use the following url to test the app:

http://localhost:4200

Conclusion

Throughout this quick post, we managed to find out how to add a slick slider in the angular and create the custom navigation arrows with the help of the ngx-slick-carousel package.