Slick Carousel Slider in Angular 16

ngx-slick-carousel is an Angular component library that brings the popular Slick Carousel to Angular applications. As a responsive and versatile carousel/slider solution, it enables developers to easily create stunning and interactive image carousels, content sliders, and dynamic presentations.

ngx-slick-carousel provides seamless integration of Slick’s features into Angular, providing various customization options, autoplay, navigation controls, and multiple display layouts. With ngx-slick-carousel, developers can enhance user experiences, showcase content in an engaging way, and provide a smooth and enjoyable carousel experience across a variety of devices and screen sizes.

In this tutorial, you will learn how to install and use the Slick Carousel Slider in Angular 16 projects.

Angular 16 Slick Carousel Slider Integration Tutorial

Steps to install, integrate and use slick carousel slider in Angular 16 projects:

• Step 1: Create a New Angular Project
• Step 2: Install Slick Slider
• Step 3: Configure Slick Slider
• Step 4: Import Slick Slider in Your Component
• Step 5: Create the Slider in the Template
• Step 6: Use the Slick Slider Component
• Step 7: Run the Application

Step 1: Create a New Angular Project

Make sure you have Node.js and Angular CLI installed. If not, you can install them using the following commands:

npm install -g @angular/cli

Then execute the following command on command prompt or cmd to install and create a new Angular project using the Angular CLI:

ng new angular-slick-slider-demo
cd angular-slick-slider-demo

Step 2: Install Slick Slider

Next, execute the following command on cmd to install ngx-slick-carousel and jQuery using npm:

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

Step 3: Configure Slick Slider

Once you have installed Slick Slider into your angular project. Then, you need to include jQuery in your Angular project.

So, Open the “angular.json” file and find the “scripts” section. Add the path to jQuery and Slick Slider’s JavaScript files:

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

Step 4: Import Slick Slider in Your Component

Next, you need to add Slick Carousel 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 {}

Step 5: Create the Slider in the Template

Next, you need to create a slider in the template. So, app.component.html file and add the following code into it:

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

Step 6: Use the Slick Slider Component

Now, you need to use slick slider component. So, app.component.ts file and add the following code into it:

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 {}
}

Step 7: Run the Application

Finally, execute the following command on cmd to start the Angular development server:

ng serve

Visit “http://localhost:4200” in your web browser, and you should see the Slick Slider in action!

Conclusion

That’s it! You have learned how to install and use Slick Slider in your Angular 16 application.

Recommended Tutorials