меню

Учебный материал по 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.


Возможно, вам будет интересно

10 лучших UI библиотек для Angular

Angular зарекомендовал себя, как один из самых популярных фреймворков JavaScript. Его компонентная архитектура позволяет разработчику разделить приложение на небольшие многократно используемые фрагменты.

События и жизненный цикл

Жизненный цикл приложения и события в Angular

Route Resolving

Разрешение данных это процесс их получения перед активацией роута. В приложении возможна задержка перед тем, как данные будут предоставлены сервером.

Angular & Rxjs: Отписываться или не отписываться?

Вы наверное уже знаете при подписке на обозреваемую последовательность либо просто событие в Javascript вы обычно должны в определенный момент отписываться, чтобы освободить память. Иначе это приведет к утечке памяти.

Оформление заявки

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта

Мы берем на себя ответственность за все стадии работы и полностью избавляем клиентов от забот и необходимости вникать в тонкости.

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту