Swiper.js in ionic. How to integrate it, step by step

At some point in the development of the Ionic Framework, it included a decent default implementation of sliders, which were very useful for creating welcome screens, short tutorials, and other applications.

ion-slides was deprecated in v6.0.0 and removed in v7.0.0. Ionic recommends using Swiper.js as an alternative. Let’s install it in our Ionic project.

npm install swiper

Once the installation is complete, we need to import some dependencies in the file where we want the slides to be displayed. In this case, it will be on the home page. Therefore, we need to add a few lines of code in home.module.ts.

  import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  import { register } from 'swiper/element/bundle';

  @NgModule({
    ...
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
  })
  export class AppModule {

    constructor() {
      register();
    }

  }

This will be enough. Now, we just need to add the swiper-container component in the home.page.html file with the following code:

<ion-content>
  <swiper-container loop="true" pagination-dynamic-bullets="true" pagination-clickable="true" slides-per-view="auto" autoplay-delay="2500" autoplay-disable-on-interaction="false">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
  </swiper-container>
</ion-content>

In this specific case, I have used some properties such as loop, pagination-dynamic-bullets, among others. You can check the implementation examples here. We save the changes, and we get the following result:

Now we have Swiper running without errors in our project. But we need to make it look decent. To achieve this, we apply some styles in the home.page.scss file.

swiper-container {
  height: 100%;
  background-color: #efefef;
}

swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 18px;
}

Now it looks correct!

Let’s apply a different background for each slide using home.page.scss. Our CSS file will look like this:

swiper-container {
  height: 100%;
  background-color: #efefef;
}

swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 18px;
}

swiper-slide:nth-child(1n) {
  background-color: white;
}

swiper-slide:nth-child(2n) {
  background-color: red;
}

swiper-slide:nth-child(3n) {
  background-color: blue;
}

swiper-slide:nth-child(4n) {
  background-color: green;
}

And we will get something like this: