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.

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




Ionic | Angular | Vue

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to use the browser cache using the AWS API Gateway + Lambda in Node JS

5+ tips for Angular Library authors

Building A Slot Machine App in React Native (part #3)

Setting Up Redux DevTools — A Simple Guide

React vs Vue.js

Lessons I learned while building in React Native

1st Keynote | NG Conf 2018

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mirza Anees Baig Barlas

Mirza Anees Baig Barlas

Ionic | Angular | Vue

More from Medium

VS Code Editor Shortcuts- How To Format Ugly Blocks of Text in HTML Quicker with this Hack.

Destructuring Objects — a beginners guide

How to embed HTML code in websites

Apply Drupal 9 patches with composer