How to use swiper Ionic 7

 

Create a new app ionic

1. Install Node.js and NPM: Before you start creating your Ionic app, you need to install Node.js and NPM (Node Package Manager) on your computer. You can download and install them from the official website: .

2. Install Ionic CLI: Once you have Node.js and NPM installed, you can install the Ionic CLI by running the following command in your terminal or command prompt:

npm install -g @ionic/cli

This command will install the latest version of the Ionic CLI globally on your system.
1. Create a new Ionic app: To create a new Ionic app, run the following command in your terminal or command prompt:

ionic start myApp

To create a new app with a specific template, you can use the --type option followed by the template name. For example, to create a new app with the blank template, run the following command:

ionic start myApp --type=blank

1. Run the app: Once you have created your app, you can run it in the browser by running the following command:

cd myApp
ionic serve

This will start a local development server and open your app in the default web browser. You can make changes to your app and see the changes live in the browser.
That's it! You have now created a new Ionic app and are ready to start building your own mobile app.

Swiper

Swiper is a popular and flexible slider component for Ionic applications that allows you to easily create touch-enabled, responsive, and highly customizable slides. Here's how you can use Swiper in your Ionic app:

1. Install Swiper: You can install Swiper via npm by running the following command in your Ionic project directory:

npm install swiper --save

2. Import Swiper: In the component where you want to use Swiper, import it at the top of the file:

3. Initialize Swiper: In your component's ngAfterViewInit() lifecycle hook, initialize Swiper with the desired options:

Create data of array

To use an array with object types in TypeScript, you can follow these steps:

1. Define an interface or a class for the object type you want to store in the array. This will allow TypeScript to enforce type checking and ensure that only objects of the specified type are added to the array.

For example, let's say we want to store objects representing cars in our array. We could define an interface for this as follows:

Declare an array variable with the type of the objects you want to store. In this case, we want to store objects of type fruits, so we would declare the array like this:
This declares an empty array of type Data[], which means it can only contain objects that match the Data interface we defined earlier.

Add objects to the array. To add a new Data object to the array, you would create a new object that matches the Data interface, and then push it onto the array:

home.page.ts

import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, Component, ElementRef, ViewChild } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import Swiper from 'swiper';
import {register} from 'swiper/element/bundle';
register();

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  standalone: true,
  imports: [IonicModule, CommonModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA] ,
})

export class HomePage {
  @ViewChild('swiper') swiperRef: ElementRef | undefined
  swiper?: Swiper;

  data = [
    {
      title: 'Nice photo',
      image: "https://img.freepik.com/free-photo/colorful-heart-air-balloon-shape-collection-concept-isolated-color-background-beautiful-heart-ball-event_90220-1047.jpg"
    },
    {
      title: 'Photografer photo',
      image: "https://img.20mn.fr/5znofcNlQduV07Lf1BSkeSk/1200x768_la-photo-se-recentre-sur-un-marche-de-passionnes-desireux-de-realiser-de-meilleures-photos-qu-avec-un-smartphone"
    },
    {
      title: 'Tree photo',
      image: "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg"
    }
]
  
  constructor() {}

  swiperReady() {
    this.swiper = this.swiperRef?.nativeElement.swiper;
  }
  goNext() {
    this.swiper?.slideNext();
  }
  goPrev() {
    this.swiper?.slidePrev();
  }
  swiperSlideChanged(e: any) {
    console.log(e);
  }
  
}

Add HTML markup: In your template, add the necessary HTML markup for Swiper, which includes a container element with a swiper-container class, and one or more slides with a swiper-slide class:

Customize Swiper: You can customize Swiper's behavior and appearance by adding various options to the mySwiper object. For example, to enable pagination and navigation buttons, you can add the following options:

<ion-header [translucent]="true">
  <ion-toolbar color="primary">
    <ion-title>
      Ionic swiper
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content scrollY="false">

  <ion-toolbar color="light">
    <ion-button (click)="goPrev()" color="danger">
      <ion-icon slot="icon-only" name="arrow-back"></ion-icon>
    </ion-button>
    <ion-button (click)="goNext()" color="danger">
      <ion-icon slot="icon-only" name="arrow-forward"></ion-icon>
    </ion-button>
  </ion-toolbar>

  <swiper-container
    #swiper
    (afterinit)="swiperReady()"
    (slidechange)="swiperSlideChanged($event)"
    [loop]="true"
    [zoom]="true"
    [pagination]="true">

    <swiper-slide *ngFor="let d of data">
      <h1>{{d.title}}</h1>
      <div class="swiper-zoom-container">
        <img [src]="d.image" style="margin-top: -480px;">
      </div>
    </swiper-slide>
  </swiper-container>
</ion-content>

Custom CSS

Custom CSS (Cascading Style Sheets) is a way to customize the visual appearance of a website beyond what is provided by its default styles. To apply custom CSS to a website, you can create a separate CSS file or add the CSS code directly to the website's HTML code.

Here are the basic steps to apply custom CSS to a website:

Identify the element you want to customize: Use the browser's developer tools to inspect the HTML code and identify the element you want to customize.

Write the CSS code: Once you've identified the element, you can write the CSS code to customize its appearance. For example, to change the font size of a heading, you can use the following CSS code:

home.page.css

swiper-container {
  width: 100%;
  height: 100%;
  /*--swiper-pagination-bullet-inactive-color:(--ion-color-step-200, #cccccc);
  --swiper-pagination-color: var(--ion-colot-primary, #3880ff);
  */
}

swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

This will add pagination bullets and navigation buttons to your Swiper slider.

That's it! With these steps, you can use Swiper in your Ionic app and create beautiful, touch-enabled sliders.