How To Create Multiple Image Slider in Angular

To create multiple image sliders 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:

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:

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

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

/* 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:

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

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

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.