afrotonder/angular-swiper-example

Simple angular ionic project implementing swiper.js 11, angular 16+ & ionic 7+

angular-swiper-example

Simple angular ionic project implementing swiper.js 11, angular 16+ & ionic 7+

Steps

1. Install the latest swiper.js version.

    $ npm i swiper@latest
   

2. Add CUSTOM_ELEMENTS_SCHEMA to the module.ts file of the view youre adding a swiper element to.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

&

schemas: [CUSTOM_ELEMENTS_SCHEMA]

3. Import register function to initialize swiper in app.component. This only needs to be done once in the whole project.

import { register } from 'swiper/element/bundle'; register();

4. Add swiper element to the .html file of the view youre working on.

<swiper-container  navigation="true" pagination="true">
  <swiper-slide *ngFor="let image of testImages">
    <img class="swiperImage" src="{{image}}" alt="">
  </swiper-slide>
</swiper-container>

angular-swiper-example's Issues

Vertical direction breaks the app

When I add direction="vertical" to the swiper-container component, it breaks the app. Do you have any solution for this?