Angular 11 Implement Slick Carousel Example

By Hardik Savani March 10, 2021 Category : Angular

Today, angular 11 carousel slider example is our main topic. we will help you to give example of angular 11 slick slider example. you can understand a concept of angular 11 slick carousel example. if you have question about slick carousel in angular 11 then i will give simple example with solution. Here, Creating a basic example of angular 11 ngx-slick-carousel example.

ngx-slick-carousel package provide to adding slider to your angular project. here we will see slick carousel simple example with preview:

Preview:

Step 1: Create New App

You can easily create your angular app using bellow command:

ng new myNewApp

Step 2: Install npm Package

Now in this step, we need to just install jquery, slick-carousel and ngx-slick-carousel in our angular application. so let's add as like bellow:

npm install jquery --save

npm install slick-carousel --save

npm install ngx-slick-carousel --save

Step 3: Import SlickCarouselModule

we will import SlickCarouselModule module as like bellow code:

src/app/app.module.ts

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

now we also need to import js and css into our angular.json file. do it as like bellow:

angular.json

...

"styles": [

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

]

....

Step 4: Update Ts File

here, we need to update ts file as like bellow:

src/app/app.component.ts

import { Component } from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'ng-carousel-demo';

slides = [

{img: "https://dummyimage.com/350x150/423b42/fff"},

{img: "https://dummyimage.com/350x150/2a2b7a/fff"},

{img: "https://dummyimage.com/350x150/1a2b7a/fff"},

{img: "https://dummyimage.com/350x150/7a2b7a/fff"},

{img: "https://dummyimage.com/350x150/9a2b7a/fff"},

{img: "https://dummyimage.com/350x150/5a2b7a/fff"},

{img: "https://dummyimage.com/350x150/4a2b7a/fff"}

];

slideConfig = {"slidesToShow": 4, "slidesToScroll": 4};

slickInit(e) {

console.log('slick initialized');

}

breakpoint(e) {

console.log('breakpoint');

}

afterChange(e) {

console.log('afterChange');

}

beforeChange(e) {

console.log('beforeChange');

}

}

Step 5: Update HTML File

here, we need to update html file as like bellow code:

src/app/app.component.html

<h1>Angular Slick Carousel/Slider Integration Tutorial - ItSolutionStuff.com</h1>

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

Step 6: Update CSS File

now you can update css file as like bellow:

src/style.css

.slick-slider {

width: 88%;

margin: auto;

background: rgb(14, 13, 13);

}

body .slick-prev,

body .slick-next {

height: 45px;

width: 40px;

background: #575d59 !important;

z-index: 100;

}

Now you can run by bellow command:

ng serve

now you can check it.

I hope it can help you...