Use Swiper JS with ionic 6 (ion-slides alternative)

I’m using the Swipe JS for a mobile app, I want to display 3 slides at a time (one central side, and two half slides at the side — so you can just about see the next slides on either side)

This is a very basic example for even a beginner to add swiper JS in ionic 6 and angular application following this example you can add swiper JS in any ionic app.

I have tried to keep this article as basic as I could so everyone can follow simple steps

Ionic Slides Deprecated

With the release of Ionic Framework v6, the Ionic Team has deprecated the ion-slides and ion-slide components in favor of using the official framework integrations provided by Swiper.

https://ionicframework.com/docs/api/slides

Create Ionic app

Lets start by creating a new ionic project

ionic start ionic-swiper

Now your ionic app is created just install swiper in your project with following com

npm i swiper

In your global.scss file add these imports

@import "swiper/scss";
@import "swiper/scss/navigation";
@import "swiper/scss/pagination";

Now open module file of your view where you want to add swiper slider and in imports add SwiperModule

and import it from

import { SwiperModule } from ‘swiper/angular’;

as shown in implementation

Now in your .ts file add following code as shown in picture

Add encapsulation: ViewEncapsulation.None in your @component and your class should implement AfterContentChecked

In your class add

@ViewChild(‘swiper’) swiper: SwiperComponent;

Now add following code

ngAfterContentChecked() {
    if (this.swiper) {
        this.swiper.updateSwiper({});
    }
}

Now in your html file add following swiper code for slides

Here we are using

[initialSlide]=1 This will set slider to show starting slide to be second (it starts from 0)

[slidesPerView]=1.25 This will be showing 1 complete slide and will give .25 fraction of screen to other two previous and next slide

[spaceBetween]=20 for gap between slides

<swiper class="banner-slides" [initialSlide]="1" [slidesPerView]="1.25" [spaceBetween]="20" [centeredSlides]="true"
#swiper>
<ng-template swiperSlide><img src="../../../assets/sale-banner1.jpeg" alt=""></ng-template>
<ng-template swiperSlide><img src="../../../assets/en_slider-01.png" alt=""></ng-template>
<ng-template swiperSlide><img src="../../../assets/banner-2.jpeg" alt=""></ng-template>
</swiper>

Now in your scss file add folowing css code

.banner-slides {
    margin-top: 20px;
    .swiper-container {
        height: 100%;
    }
    .swiper-slide {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 180px;
    }
    .swiper-slide-prev {
        height: 160px;
    }
    .swiper-slide-next {
        height: 160px;
    }
    .swiper-wrapper {
        align-items: center;
    }
}

Now you will run your code and get this end result

Note: I have tried to write this step by step guide as simple as I could and have tried to cover only the basic implementation if you want to read about more swiper options you may visit official swiper js website