Angular Swiper Image Touch Slider

Вернуться назад

Учебный материал по swipe слайдеру изображений в Angular, swiper. В этом подробном руководстве мы объясним, как создать swipe слайдер изображений/контента или карусель в приложении angular с помощью пакета npm ngx-useful-swiper.

Ngx-useful-swiper, также известный как Swiper — это превосходный слайдер контента или изображений, используемый на современных платформах для создания циклической карусели просмотра. Использование ngx-useful-swiper предлагает поддержку не только на angular, а так же на JavaScript, Angular, React, Vue или Svelte.

Swiper предлагает первоклассные функции для расширения возможностей компонентов карусели. Он не требует каких-либо сторонних jQuery или зависимостей. Поставляется бесплатно и с полной поддержкой сенсорного взаимодействия.

Пакет npm ngx-useful-swiper обеспечивает богатую поддержку API, позволяет mutation observers автоматически повторно инициализировать и пересчитывать основные параметры для обработки динамических обновлений через DOM. Что самое главное, это открытый исходный код и бесплатное использование.

Вот полный список функций Swiper:

Библиотечный агностик;
1:1 Сенсорное движение;
Наблюдатель за мутациями;
Богатый API;
Полная поддержка True RTL;
Макет многорядных слайдов;
Эффекты перехода;
Двустороннее управление;
Полный контроль навигации;
Макет флексбокса;
Самая гибкая сетка макетов слайдов;
Параллаксные переходы;
Ленивая загрузка изображений;
Виртуальные слайды.

Пример интеграции мобильного сенсорного слайдера Angular Swiper

Вот инструкции, которым Вы должны следовать, чтобы реализовать карусель Swiper в angular приложении с нуля.

Шаг 1: Создайте проект Angular;
Шаг 2: Установите пакет Swiper;
Шаг 3: Добавьте Swiper CSS;
Шаг 4: Зарегистрируйте NgxUsefulSwiperModule в модуле приложения;
Шаг 5: Реализуйте слайдер сенсорного контента;
Шаг 6: добавьте динамические слайды в Swiper;
Шаг 7: Запустите проект Angular.

Создать угловой проект

В первую очередь убедитесь, что вы установили angular cli в своей системе, если нет, используйте следующую команду:

  
npm install -g @angular/cli

Далее начните с установки нового углового приложения:

  
ng new ng-demo

Перехеод в корень приложения:

  
cd ng new ng-demo

Установка пакета Swiper

На следующем шаге Вам необходимо установить пакет Swiper в проект angular. Считается самым современным бесплатным мобильным сенсорным слайдером, в котором используется аппаратно-ускоренный переход.

  
npm install --save ngx-useful-swiper@latest swiper

Добавление поддержки CSS стилей для свайпера

Да, Вы можете включить стили CSS swiper по умолчанию, включив путь CSS swiper к стилям приложения в файле angular.json:

  
...

"styles": [
     "./node_modules/swiper/swiper-bundle.css",
]

...

Зарегистрируйте NgxUsefulSwiperModule в модуле приложения

Затем в файле app.module.ts импортируйте NgxUsefulSwiperModule из пакета ngx-useful-swiper, а также зарегистрируйте модуль в массиве imports, как показано ниже.

  
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgxUsefulSwiperModule } from 'ngx-useful-swiper';
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgxUsefulSwiperModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Реализация контентной части swipe слайдера

Позвольте мне показать Вам, как реализовать контентную часть swipe слайдера в angular. Во-первых, Вам нужно импортировать SwiperOptions в верхнюю часть шаблона TypeScript, определить параметры настройки конфигурации, которые включают навигацию, а также стрелки переключателя «предыдущий» и «следующий».

Добавьте следующий код в файл app.component.ts:

 
import { Component } from '@angular/core';
import { SwiperOptions } from 'swiper';
    
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  config: SwiperOptions = {
    pagination: { 
      el: '.swiper-pagination', 
      clickable: true 
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    },
    spaceBetween: 30
  };  
  
}

Вы можете создать ползунок и добавить содержимое графического интерфейса, как было предложено, определить директиву swiper и передать свойство конфигурации.

Кроме того, определите класс swiper-wrapper и дочерние элементы с классом swiper-slide; каждый дочерний элемент относится к слайду, который пользователь может вращать, касаясь и проводя пальцем по отдельным слайдам.

Обновите следующий код в файле app.component.html:

  
<swiper [config]="config">
   <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="https://loremflickr.com/g/600/400/paris" alt="img 1"></div>
    <div class="swiper-slide"><img src="https://loremflickr.com/600/400/brazil,rio" alt="img 2"></div>
    <div class="swiper-slide"><img src="https://loremflickr.com/600/400/paris,girl/all" alt="img 3"></div>
    <div class="swiper-slide"><img src="https://loremflickr.com/g/600/400/paris" alt="img 4"></div>
    <div class="swiper-slide"><img src="https://loremflickr.com/600/400/brazil,rio" alt="img 5"></div>
    <div class="swiper-slide"><img src="https://loremflickr.com/600/400/paris,girl/all" alt="img 6"></div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>
  <!-- Add Arrows -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</swiper>

Вот код CSS, который Вам нужно добавить в файл CSS или SCSS, чтобы установить высоту и ширину ползунка swiper.

 
swiper {
  height: 400px;
  width: 600px;
}

Динамическое добавление слайдов в Swiper

На этом этапе мы покажем Вам, как легко добавить динамические слайды в компонент swiper, поэтому откройте и вставьте следующий код в файл app.component.html:

 
<swiper [config]="config">
  <div class="swiper-wrapper">
    <img class="swiper-slide" *ngFor="let img of Images" [src]="img.src" [alt]="img.alt" />
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-next"><</div>
  <div class="swiper-button-prev"></div>
</swiper>

Обновите рекомендуемый код в файле app.component.ts:

  
import { Component } from '@angular/core';
import { SwiperOptions } from 'swiper';
    
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  Images: Array<object> = [
    {
      src: 'https://loremflickr.com/g/600/400/paris',
      alt: 'Image 1',
    }, {
      src: 'https://loremflickr.com/600/400/brazil,rio',
      alt: 'Image 2'
    }, {
      src: 'https://loremflickr.com/600/400/paris,girl/all',
      alt: 'Image 3'
    }, {
      src: 'https://loremflickr.com/600/400/brazil,rio',
      alt: 'Image 4'
    }, {
      src: 'https://loremflickr.com/600/400/paris,girl/all',
      alt: 'Image 5'
    }, {
      src: 'https://loremflickr.com/600/400/brazil,rio',
      alt: 'Image 6'
    }    
  ]
  config: SwiperOptions = {
    pagination: { 
      el: '.swiper-pagination', 
      clickable: true 
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    },
    spaceBetween: 30
  };  
  
}

Исходный код размещен на GitHub.

Запуск нашего проекта на Angular

Вы можете открыть терминал и использовать команду для запуска Angular приложения:

  
ng serve

Angular Swiper Image Touch Slider

Заключение

Материал по слайдеру изображений в Angular 12 swiper завершен. В этом примере мы прошли шаг за шагом, чтобы понять, как интегрировать swipe изображение или слайдер контента в angular приложении с помощью библиотеки Swiper.

Мы надеемся, что это поможет вам создать swipe слайдер компонент в приложении на Аngular.