Ionic 6 Slides using Swiper.js Tutorial by Examples

In this Ionic tutorial, you will learn how to migrate the Ionic Content Slider to the latest v6 implementation. Ionic Framework used Swiper Js slider in its slider till version 5. In which it creates its own Ionic-Swiper UI components to facilities Ionic developers.

But in the latest version 6, the Ionic team has decided to move to the native Swiper JS implementation in Ionic apps. It means you need to migrate the use of Ion-Slides components with Swiper ones to make it work on upcoming applications.

In this guide, you will get to know, how to do this Migration in Ionic Angular applications by following easy steps. This tutorial is an upgrade from our previous tutorial which used the implementation of the Swiper slider which is going to be deprecated. You check it here.

Let’s get started!

Step 1 – Install Required Packages

As usual, you can upgrade or install the Ionic CLI package globally by executing the below command in the terminal window:

npm install @ionic/angular@latest

Now, in addition, we need to install the Swiper package library as well. This will allow us to migrate our Ion-Slides to its native implementation:

npm install swiper

 

Step 2 – Import SwiperModule

Next, we need to import the SwiperModule to use the Swiper components in our component classes. You can import it on any module as per requirement. In our case we will have the demo on HomePage so update the home.module.ts file:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';

import { HomePageRoutingModule } from './home-routing.module';

import { SwiperModule } from 'swiper/angular';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    SwiperModule, //<-- Added SwiperModule
  ],
  declarations: [HomePage],
})
export class HomePageModule {}

 

Step 3 – Add SCSS Style Swiper Libs

We used to have these styles inside the Ionic style sheets, but now we need to be imported separately inside the global.scss. Only ~swiper/scss is enough for most cases, but you can uncomment as required.

// global.scss
@import "~swiper/scss";
// @import "~swiper/scss/autoplay";
// @import "~swiper/scss/keyboard";
// @import "~swiper/scss/pagination";
// @import "~swiper/scss/scrollbar";
// @import "~swiper/scss/zoom";

 

Step 4 – Update Template HTML

Let’s discuss the changes we need to do to the current implementation.

Change 1# Component changes

We need to replace <ion-slides> to <swiper> and <ion-slide> to <ng-template swiperSlide>

So this:

<ion-slides pager="true" [options]="slideOptsOne" #slideWithNav
  (ionSlideDidChange)="SlideDidChange(sliderOne,slideWithNav)">
  <ion-slide *ngFor="let s of sliderOne.slidesItems">
	<img src="https://picsum.photos/300/200?t={{s.id}}">
	<span class="slide-text">Slide id {{s.id}}</span>
  </ion-slide>
</ion-slides>

Will become this:

<swiper
  pager="true"
  [initialSlide]="0"
  [slidesPerView]="1"
  [autoplay]="true"
  [loop]="true"
  #slideWithNav
  (swiper)="onSwiper($event)"
  (slideChange)="onSlideChange(sliderOne,slideWithNav)"
>
  <ng-template swiperSlide *ngFor="let s of sliderOne.slidesItems">
	<img src="https://picsum.photos/300/200?t={{s.id}}" />
	<div class="slide-text"><span>Slide id {{s.id}}</span></div>
  </ng-template>
</swiper>

 

Change 2# prop and event changes

Now, you can provide an object of [options], instead, add it separately as property binding with its value. Second, the events also need to be changed. Like previously we had <strong>(ionSlideDidChanges)</strong> which become <strong>(slideChange)</strong>. You can check more details on events here.

 

Complete home.page.html will have updated/migrated code as follows:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title> Multiple v6 Sliders: FreakyJolly </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">
  <h5>Auto Play Slider</h5>

  <ion-grid>
    <ion-row>
      <ion-col size="12">
        <swiper
          pager="true"
          [initialSlide]="0"
          [slidesPerView]="1"
          [autoplay]="true"
          [loop]="true"
          #slideWithNav
          (swiper)="onSwiper($event)"
          (slideChange)="onSlideChange(sliderOne,slideWithNav)"
        >
          <ng-template swiperSlide *ngFor="let s of sliderOne.slidesItems">
            <img src="https://picsum.photos/300/200?t={{s.id}}" />
            <div class="slide-text"><span>Slide id {{s.id}}</span></div>
          </ng-template>
        </swiper>
      </ion-col>
    </ion-row>
  </ion-grid>

  <h5>Slider with Space Between</h5>

  <ion-grid>
    <ion-row>
      <ion-col size="1">
        <span class="slider-nav arrow-prev" (click)="slidePrev(slideWithNav2)">
          <div
            class="prev-icon-custom custon-nav"
            [class.disabled]="sliderTwo.isBeginningSlide"
          ></div>
        </span>
      </ion-col>
      <ion-col size="10">
        <swiper
          pager="false"
          [initialSlide]="0"
          [slidesPerView]="1"
          [autoplay]="true"
          [centeredSlides]="true"
          [spaceBetween]="20"
          #slideWithNav2
          (swiper)="onSwiper($event)"
          (slideChange)="onSlideChange(sliderTwo,slideWithNav2)"
        >
          <ng-template swiperSlide *ngFor="let s of sliderTwo.slidesItems">
            <img src="https://picsum.photos/300/200?t={{s.id}}" />
          </ng-template>
        </swiper>
      </ion-col>
      <ion-col size="1">
        <span class="slider-nav arrow-next" (click)="slideNext(slideWithNav2)">
          <div
            class="next-icon-custom custon-nav"
            [class.disabled]="sliderTwo.isEndSlide"
          ></div>
        </span>
      </ion-col>
    </ion-row>
  </ion-grid>

  <h5>Slider at bottom</h5>

  <ion-grid>
    <ion-row>
      <ion-col size="1">
        <span class="slider-nav arrow-prev" (click)="slidePrev(slideWithNav3)">
          <div
            class="prev-icon-custom custon-nav"
            [class.disabled]="sliderThree.isBeginningSlide"
          ></div>
        </span>
      </ion-col>
      <ion-col size="10">
        <swiper
          pager="false"
          [initialSlide]="0"
          [slidesPerView]="3"
          #slideWithNav3=""
          (swiper)="onSwiper($event)"
          (slideChange)="onSlideChange(sliderThree,slideWithNav3)"
        >
          <ng-template swiperSlide *ngFor="let s of sliderThree.slidesItems">
            <img src="https://picsum.photos/300/200?t={{s.id}}" />
          </ng-template>
        </swiper>
      </ion-col>
      <ion-col size="1">
        <span class="slider-nav arrow-next" (click)="slideNext(slideWithNav3)">
          <div
            class="next-icon-custom custon-nav"
            [class.disabled]="sliderThree.isEndSlide"
          ></div>
        </span>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

You can check/compare older implementations here.

 

Now, the home.page.ts file will have the following updates:

import {
  Component,
  ViewChild,
} from '@angular/core';
import { IonSlides } from '@ionic/angular';
import Swiper from 'swiper';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  @ViewChild('slideWithNav', { static: false }) slideWithNav: IonSlides;
  @ViewChild('slideWithNav2', { static: false }) slideWithNav2: IonSlides;
  @ViewChild('slideWithNav3') slideWithNav3: Swiper;

  sliderOne: any;
  sliderTwo: any;
  sliderThree: any;

  slideOpts = {
    initialSlide: 1,
    speed: 400,
  };

  //Configuration for each Slider
  slideOptsOne = {
    initialSlide: 0,
    slidesPerView: 1,
    autoplay: true,
  };
  slideOptsTwo = {
    initialSlide: 1,
    slidesPerView: 2,
    loop: true,
    centeredSlides: true,
    spaceBetween: 20,
  };
  slideOptsThree = {
    initialSlide: 0,
    slidesPerView: 3,
  };

  constructor() {
    //Item object for Nature
    this.sliderOne = {
      isBeginningSlide: true,
      isEndSlide: false,
      slidesItems: [
        {
          id: 995,
        },
        {
          id: 925,
        },
        {
          id: 940,
        },
        {
          id: 943,
        },
        {
          id: 944,
        },
      ],
    };
    //Item object for Food
    this.sliderTwo = {
      isBeginningSlide: true,
      isEndSlide: false,
      slidesItems: [
        {
          id: 324,
        },
        {
          id: 321,
        },
        {
          id: 435,
        },
        {
          id: 524,
        },
        {
          id: 235,
        },
      ],
    };
    //Item object for Fashion
    this.sliderThree = {
      isBeginningSlide: true,
      isEndSlide: false,
      slidesItems: [
        {
          id: 643,
        },
        {
          id: 532,
        },
        {
          id: 232,
        },
        {
          id: 874,
        },
        {
          id: 193,
        },
      ],
    };
  }

  //Move to Next slide
  slideNext(slideView) {
    slideView.swiperRef.slideNext(500);
  }

  //Move to previous slide
  slidePrev(slideView) {
    slideView.swiperRef.slidePrev(500);
  }

  //Method called when slide is changed by drag or navigation
  slideDidChange(object, slideView) {
    this.checkIfNavDisabled(object, slideView);
  }

  //Call methods to check if slide is first or last to enable disbale navigation
  checkIfNavDisabled(object, slideView) {
    this.checkisBeginning(object, slideView);
    this.checkisEnd(object, slideView);
  }

  checkisBeginning(object, slideView) {
    object.isBeginningSlide = slideView?.swiperRef?.isBeginning;
    console.log('object.isBeginningSlide', object);
  }
  checkisEnd(object, slideView) {
    object.isEndSlide = slideView?.swiperRef?.isEnd;
    console.log('object.isEndSlide', object);
  }

  onSwiper(event) {
    // console.log(event);
  }
  onSlideChange(object, slideView) {
    this.checkIfNavDisabled(object, slideView);

 

Update CSS style, as we have implemented next/ previous navigation with Disabled effect in our tutorial. So open the home.page.scss file and update as follows:

// Slider Style START
.custon-nav {
  height: 48px;
  width: 20px;
  cursor: pointer;

  vertical-align: middle;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.prev-icon-custom {
  background: url(data:image/png;base64,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)
    no-repeat scroll 0px 0px;
}
.prev-icon-custom.disabled {
  opacity: 0.4;
  cursor: default;
}
.next-icon-custom {
  background: url(data:image/png;base64,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)
    no-repeat scroll -32px 0px;
}
.next-icon-custom.disabled {
  opacity: 0.4;
  cursor: default;
}
.slider-nav {
  ion-icon {
    height: 100%;
  }
}

.slide-text {
  display: flex;
  justify-content: center;
  align-items: center;
  span {
    color: white;
    background: #afafaf;
    width: 30%;
    border-radius: 4px;
  }
}
// Slider Style STOP

} }

 

Step 5 – See In Action

Now you can run your Ionic app to see it working by hitting npm start to open at localhost:4200.

 

Hope this helped… Thanks …