Как создать несколько независимых Swiper Slider в angular проекте?

Для создания нескольких независимых Swiper Slider в Angular проекте, вы можете использовать библиотеку ngx-swiper-wrapper.

Вот пошаговая инструкция для настройки и использования нескольких Swiper Slider в Angular проекте:

Шаг 1: Установка ngx-swiper-wrapper
Вам нужно установить ngx-swiper-wrapper и swiper в ваш проект Angular. Запустите следующую команду в консоли:

npm install swiper ngx-swiper-wrapper --save

Шаг 2: Импортирование модулей и стилей
Откройте файл app.module.ts и импортируйте модуль SwiperModule из ngx-swiper-wrapper:

import { SwiperModule } from 'ngx-swiper-wrapper';

Затем добавьте SwiperModule в секцию imports:

imports: [
SwiperModule
]

Откройте файл styles.scss и добавьте следующие строки для импорта стилей Swiper:

@import '~swiper/swiper.scss';
@import '~swiper/components/navigation/navigation.scss';
@import '~swiper/components/pagination/pagination.scss';
@import '~swiper/components/scrollbar/scrollbar.scss';

Шаг 3: Создание компонента для Swiper Slider
Создайте новый компонент, например slider.component.ts, и добавьте следующий код:

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

@Component({
selector: 'app-slider',
templateUrl: './slider.component.html',
styleUrls: ['./slider.component.scss']
})
export class SliderComponent implements OnInit {

public swiperOptions = {};

constructor() { }

ngOnInit(): void {
this.initializeSwiper();
}

initializeSwiper(): void {
this.swiperOptions = {
autoplay: true,
loop: true,
navigation: true,
pagination: true
};
}
}

Шаг 4: Настройка шаблона компонента
Откройте файл slider.component.html и добавьте следующий код:

<swiper [config]="swiperOptions">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</swiper>

Вы можете настроить количество слайдов и содержимое каждого слайда по своему усмотрению.

Шаг 5: Использование компонента в других компонентах
Используйте компонент SliderComponent в других компонентах вашего проекта, добавляя его в шаблон:

<app-slider></app-slider>

Вы можете добавить несколько инстансов SliderComponent в шаблоне и каждый будет независимым Swiper Slider.

Вот и все! Теперь у вас должны быть созданы несколько независимых Swiper Slider в вашем Angular проекте. Вы можете настроить опции Swiper по своему усмотрению и добавлять содержимое для каждого слайда.