How to create carousel in Angular?

2 min read

Step 1 :

  • Create a new project in angular.
ng new yourProjectName

Step 2 :

  • Go inside the project folder and run the command ng serve. This will run the application in the browser on port 4200.

  • You will be able to see the output like this for example I have create the project with the name as angular-carousel.

    Output

Step 3:

  • Now install the required dependencies.
npm install jquery --save
npm install slick-carousel --save
npm install ngx-slick-carousel --save
  • After installing the dependencies you need to configure that as well. For that you need to do some modifications in the angular.json.

  • Copy and paste below changes in the file inside build object.

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

Step 4:

  • Now download the images from google and save it inside the assets folder of the project with folder name as images or you can strucutre it in your way and name them if you want to.

    Output

Step 5:

  • After adding the images go inside app which is inside src - [ src/app ].

  • Now create an empty folder name it as component.

    Output

  • Now we need to create the component for the carousel.

ng g c component/carousel
  • After creating the component you will be able to see something like this in the folder structure.

    Output

  • Now we need to check whether that component is imported correctly or not inside the app.module.ts file.

    Output

  • Now we need to import SlickCarouselModule inside the app.module.ts file.

    Output

Step 6:

  • Now we need to add the changes inside carousel.component.ts file.
/* import these on the top*/

import { Component, OnInit, ViewChild } from "@angular/core";
import { SlickCarouselComponent } from "ngx-slick-carousel";
/*paste inside export class */
@ViewChild('slickCarousel') slickModal!: SlickCarouselComponent;

constructor() {}

/* path for the images inside folder*/
slides = [
{ img: '../assets/images/pic1.jpg' },
{ img: '../assets/images/pic2.jpg' },
{ img: '../assets/images/pic3.jpg' },
{ img: '../assets/images/pic4.jpg' },
{ img: '../assets/images/pic5.jpg' },
{ img: '../assets/images/pic6.jpg' },
{ img: '../assets/images/pic7.jpg' },
{ img: '../assets/images/pic8.jpg' },
{ img: '../assets/images/pic9.jpg' },
];

/* configs for the slider */
slideConfig = {
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
infinite: true,
speed: 1400,
autoplaySpeed: 2000,
arrows: true,
cssEase: 'ease',
dots: false,
fade: false,
easing: 'linear',
pauseOnHover: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
infinite: true,
},
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
},
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
},
},
],
};

ngOnInit(): void {}
  • After adding the changes in the ts file we need to add the changes in the carousel.component.html file.
<ngx-slick-carousel
class="carousel"
#slickModal="slick-carousel"
[config]="slideConfig"
>

<div ngxSlickItem *ngFor="let slide of slides" class="slide">
<img
src=""
loading="lazy"
alt=""
width="98%"
height="300.9px"
/>

</div>
</ngx-slick-carousel>
  • To make that work we need to do a small change in app.component.html file.
<app-carousel></app-carousel>
  • Now everything is done and you can see the output.

    Output

See live demo : Click here


Thanks for reading !!! 😊
Share this post :