Меню ×
Angular Swiper Image Touch Slider

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.


Похожие материалы

Использование тега ng-content и размещения верстки из шаблона в теге вызова компонента в Angular

Реактивные формы — это одна из лучших вещей в Angular. Поскольку они упрощают работу с большими и действительно динамичными формами. В этой мы рассмотрим создание кастомного элемента формы.

Angilar создание обычных и вложенных компонентов через CLI. Описание модели.

наверх