How To Create Multiple Image Slider in Angular
Tags: webdev, javascript, beginners, css
Published: 2023-07-23 11:22:32

To create multiple [image sliders in Angular](https://foolishdeveloper.com/image-slider-in-angular/), you can follow a similar approach as before, but this time, we will encapsulate the image slider logic and data into a reusable component. 

Each instance of the component will represent a separate image slider with its unique set of images and configurations.

Let's go through the steps to create multiple image sliders in Angular:


#### Step 1: Create a Reusable Image Slider Component


First, let's create a reusable image slider component that encapsulates the image slider logic:

```bash
ng generate component image-slider
```
#### Step 2: Set Up the Image Slider Component
Open the image-slider.component.ts file and update it with the following code:

```js
// image-slider.component.ts

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

@Component({
  selector: 'app-image-slider',
  templateUrl: './image-slider.component.html',
  styleUrls: ['./image-slider.component.css']
})
export class ImageSliderComponent {
  @Input() slideConfig: any;
  @Input() images: string[];
}

```
In the ImageSliderComponent, we have defined two @Input() properties: slideConfig and images. These properties will allow us to pass the configuration and image data to the component from the parent component.

#### Step 3: Create the Template
Open the image-slider.component.html file and update it with the following code:

```css
<!-- image-slider.component.html -->

<h2>Image Slider</h2>

<ngx-slick-carousel class="carousel" [config]="slideConfig">
  <div *ngFor="let image of images">
    <img src="{{ image }}" alt="Image">
  </div>
</ngx-slick-carousel>

```
#### Step 4: Add Styling

Open the image-slider.component.css file and add the following styling. You can customize it further based on your needs:

```css
/* image-slider.component.css */

h2 {
  text-align: center;
}

.carousel {
  max-width: 500px;
  margin: 0 auto;
}

.carousel img {
  width: 100%;
}

```
#### Step 5: Use the Reusable Image Slider Component

Now that we have a reusable image slider component, we can use it multiple times in our application.

Open the app.component.ts file and update it with the following code:

```js
// app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  slideConfig = {
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: true,
    infinite: true,
    autoplay: true,
    autoplaySpeed: 3000
  };

  images1 = [
    'image1.jpg',
    'image2.jpg',
    'image3.jpg'
  ];

  images2 = [
    'image4.jpg',
    'image5.jpg',
    'image6.jpg'
  ];
}

```
In the AppComponent, we have defined two sets of images (images1 and images2) and a common slideConfig for both image sliders.

#### Step 6: Update the Template
Open the app.component.html file and update it with the following code:

```html
<!-- app.component.html -->

<app-image-slider [slideConfig]="slideConfig" [images]="images1"></app-image-slider>

<hr>

<app-image-slider [slideConfig]="slideConfig" [images]="images2"></app-image-slider>

```
In the template, we use the <app-image-slider> component twice, each with its unique set of images (images1 and images2) and the common slideConfig.

#### Step 7: Run the Application
Now, run your Angular application:

```js
ng serve
```
You can access the page by navigating to http://localhost:4200/ in your web browser. You should see two image sliders with different sets of images and the same slide configurations.

Congratulations! You have successfully created **multiple image sliders in Angular** using a reusable image slider component.