React & Swiper: Basic Guide For Using Swiper Effects

HTML, CSS, Javascript

preppy-foodweb.app

While researching for ways to enhance the UI/UX on my PWA, I came across Swiper: the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior, intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps — swiperjs.com.

The documentation provided on swiperjs.com is thorough and organized, and the basic implementation of Swiper modules in React can easily be understood by reading through the steps given there. For this article, I will focus on providing you the details of incorporating the awesome Swiper Effects (Coverflow, Fade, Cube, Flip) in React.

I will simplify my explanations as much as possible and provide you guidance one step at a time.

Let’s get coding!

Installation

Create your react app and install swiper (current v6.4.14)

npx create-react-app effectdemo
cd effectdemo
npm i swiper

Swiper package contains different sets of CSS, Less, and SCSS. We will be using SCSS styles for the Effects so install sass as shown below.

**Installing other versions of node-sass will throw an error because of incompatibility. Make sure you install v4.14.1**

npm install node-sass@4.14.1

Adding CoverFlow Effect

Once the required packages are installed, import the necessary styles and modules from Swiper to your React component and configure Swiper to use them accordingly. You also might want to touch-up your CSS file to make sure the photo sizes are measured properly. Reference to App.js and App.css provided for you below.

App.js

App.css

Breakdown of the parameters that are set inside the <Swiper> tag for the CoverFlow Effect provided below.

<Swiper> in App.js

Easy peasy lemon squeezy~*

Let’s take a look at implementing the Fade Effect next!

Adding Fade Effect

For the sake of brevity, I will leave out redundant information and provide code snippets of what needs to be replaced on your App.js & App.css moving forward.

Replace the following imports, configuration, and <Swiper> tag:

With this!

And don’t forget to replace all of your App.css lines with the following.

By simply importing and configuring Swiper to the Fade Effect, and changing out the parameters, voila! You’ve created your very own Swiper Fade Effect~*

Adding Cube Effect

Let’s go ahead and try out the Cube Effect. On the original React component, you’ve created for the Coverflow Effect,

Replace the following imports, configuration, and <Swiper> tag:

With this.

And App.css should be as follows:

Let’s move on to our next and final Swiper Effect!

Adding Flip Effect

You know the drill :)

Replace the original import, configuration, and <Swiper> tag with these!

Don’t forget to replace App.css with the following:

Congratulations! Awesome job creating Swiper Effects in React~*

There’s so much more Swiper has to offer and I encourage you to check out the various demos provided here.

Thank you for reading! And always remember — whenever, wherever, Always Be Coding.