Angular 14 Slick Carousel/Slider Integration Tutorial

Angular 14 slick carousel example; In this tutorial, you will learn how to use slick carousel in angular 14 apps using ngx-slick-carousel-o package.

Angular 14 Slick Carousel/Slider Integration Tutorial

Use the following steps to create carousel slider using slick plugin in angular 14 apps; as follows:

  • Step 1 – Create New Angular App
  • Step 2 – Install slick Carousel Library
  • Step 3 – Import Modules in Module.ts File
  • Step 4 – Create Carousel Slider in View File
  • Step 5 – Import Components in Component ts File
  • Step 6 – Start the Angular App

Step 1 – Create New Angular App

First of all, open your terminal and execute the following command on it to install angular app:

ng new my-new-app

Step 2 – Install slick Carousel Library

Then install NPM package called ngx-slick-carousel –save for implement slick carousel in angular apps. So, You can install the packages by executing the following commands on the terminal:

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

After that, open angular.json file and update the following code into it:

...
"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 3 – Import Modules in Module.ts File

In this step, visit src/app directory and open app.module.ts file. And then add the following lines of into 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 4 – Create Carousel Slider in View File

In this step, create slick carousel in angular apps. So, visit src/app/ and app.component.html and update the following code into it:

<h1>Angular Slick Carousel/Slider Integration Tutorial - Tutsmake.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 5 – Import Components in Component ts File

In this step, visit the src/app directory and open app.component.ts. Then add the following code into component.ts file:

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 6 – Start the Angular App

In this step, execute the following command on terminal to start angular slick carousel app:

ng serve

Recommended Angular Tutorials

AuthorDevendra Dode

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *