My IONIC Notes – DEV Community

Posted on by 


npm i -g @ionic/cli
ionic start myApp tabs --capacitor --type=angular
ionic generate [schematic] [name]

schematic: pages, components, directives, services
Enter fullscreen mode

Exit fullscreen mode



# Working with Swiper JS

ionic start MySwiperApp blank --type=angular
cd ./MySwiperApp

npm i swiper@latest
Enter fullscreen mode

Exit fullscreen mode

[1]. app.component.ts

...
import ....;

// Swiper.JS
import { register } from "swiper/element/bundle";
register();

@Component({
...
Enter fullscreen mode

Exit fullscreen mode

[2]. banner.component.ts
To use a web component we now need to import the CUSTOM_ELEMENTS_SCHEMA

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { IonicSlides } from '@ionic/angular/standalone';
@Component({
  selector: 'app-banner',
  templateUrl: './banner.component.html',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class BannerComponent {
  swiperModules = [IonicSlides];
  banners = [
  {id: 1, banner: 'assets/banner/1.jpg', active: true},
  {id: 2, banner: 'assets/banner/2.jpg', active: true},
  {id: 3, banner: 'assets/banner/3.jpg', active: true},
  {id: 4, banner: 'assets/banner/4.jpg', active: true},
];
}
Enter fullscreen mode

Exit fullscreen mode

[3]. banner.component.html

<swiper-container
      [loop]="true"
      [pagination]="true"
      autoplay="true"
    >
      @for (banner of banners(); track $index) {
      <swiper-slide>
        <img [src]="banner?.image" />
      </swiper-slide>
      }
</swiper-container>
Enter fullscreen mode

Exit fullscreen mode

ref:



Source link