Creating a Slide using SWIPER JS in IONIC+REACT in 5 Steps (2022)- Mobile App Development for Beginners.

In this article, I will briefly explain the creation of a slider for an ionic + react app. It is expected that in V7 of Ionic, IonSlide will be depreciated or removed. As at the time of the writing of this article, ionic is at its V6.

Step 1

First, ensure you have downloaded the recent or recommended version of Node Js

After Installation, Click on the search bar of windows and search for the Node.js command prompt. It should look like the picture below:

Step 2

Next, we are going to install ionic to our device using the following:

npm install -g @ionic/cli

The above command should install the latest version of ionic to your device.

When the installation is finished, you can navigate to any folder of your choice and change its directory to create a new application in ionic react.

After changing the directory to a location of your choice, the next thing we need to do is to insert the command line for the creation of a new app:

ionic start

During the installation, a few options will come up. Please check the images below to see them:

Please Pick REACT

At this stage, Pick React. Our tutorial will be based on it.

Give it a project name.

Pick a blank Project.

The picture below should be similar to yours. The picture would show that the creation of the new app is complete.

Step 3

Next, open the app through your visual studio code. In the Pages folder, locate the Home.tsx file. This is where we would begin from.

Clean up the page a little and leave the following below.

Now, let’s begin.

Next, we will install the Swiper function from Swiper.js using the command line: npm i swiper

You can install the swiper js from the terminal of your visual studio code or from the node js.

After the installation, the next thing would be to import Swiper into our code.

import { Swiper, SwiperSlide, useSwiper} from ‘swiper/react’;

// Import Swiper styles

import ‘swiper/css’;

import ‘swiper/css/navigation’;

import ‘swiper/css/pagination’;

import ‘swiper/css/scrollbar’;

import { Navigation } from “swiper”;

Step 4

Next, we would create the data we would like to see on our slider.

Now it is time to create our slider in the IonContent section.

Step 5

When done, you can run the command line in your node js or terminal:

ionic serve

Your own can look like mine below.

Good luck with yours and a little feedback will be nice.

Have fun with coding.