How to use Swiper.js with React.

Purpose

Swiper is a very useful library with introducing functions about swipe, like pagination, navigation, and have various features. I will share my knowledge about the swiper.

What is Swiper?

The Below sentence is extracted by swiper

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.

Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity.

Just in case I tried to use Swiper inside Internet explorer(by using IE tab, this is google chrome extension), this is not working.

So if you want to use Swiper, you should check the browser. If you want to use Swiper private way, it might be Okay because currently, almost all people use modern browser(like google chrome). However, if you want to create apps for work or big companies, you should check the browser because they sometimes use Internet explorer. (As I’m working for a Japanese IT company now, some clients use Internet Explorer right now).

How does it work?

I will show my portfolio site image.

You can select a different way to change your several photos(like a flip, cube, cover flow).

Not only effective but also many different functions are provided by swiper.js.

In this article, basically, I pick up swiper’s fundamentals. If you want to get an image of how does it works more deeply, check swiperjs.com demo. And you can also use swiper.js in vanilla JS, Vue, Angular, Svelte. Yes, this library definitely developed for modern browsers because this library was covered with Svelte(I don’t cover with Svelte yet, but I heard it’s a good compiler to develop efficiently. So when I learn about Svelte, I will share my knowledge ).

Steps to use

1. Install Swiper by using NPM(npm install Swiper)
2. Import Swiper core and required styles. In my case, I wanted to use the basic slides, navigation, pagination, Effectflip. You can choose options whatever you want. If you want to know options deeper, please check swiperjs.com API.

3. Use inside your file with Swiper and Swiper slide. You should wrap each Swiper slide tag by Swiper tag. You can add a lot of options such as spaceBetween, speed, loop, like that as a default. And also add your imported function like EffectFlip, Navigation, Pagination. In my case, I want to add three photos so I used three Swiper tags, and I prepared data.tsx folder to display each photo inside Swiper slide tag.

4. Done! You can use the swipe function easily by using Swiper(If you want to know my whole file, please check my Github gist. And If you want to see my whole code and folder structure, please check my GitHub repo).

I got an error when I introduced Swiperjs

1. inside the official guide, below code is used to import

import 'swiper/scss';
import 'swiper/scss/navigation';
import 'swiper/scss/pagination';

but it’s not working correctly. So I changed like below way. Maybe that’s because swiper or any other dependency version, but I’m not quite sure why it’s not working.

import "swiper/swiper-bundle.min.css";
import "swiper/swiper.scss";

import "swiper/components/navigation/navigation.scss";
import "swiper/components/pagination/pagination.scss";
import "swiper/components/effect-flip/effect-flip.scss";
import "swiper/components/scrollbar/scrollbar.scss";

2. Similar problem. An official guide, below code, is true to use Swiper.

<Swiper
      // install Swiper modules
      modules={[Navigation, Pagination, Scrollbar, A11y]} // I want to focus here
      spaceBetween={50}
      slidesPerView={3}
      navigation
      pagination={{ clickable: true }}
      scrollbar={{ draggable: true }}
      onSwiper={(swiper) => console.log(swiper)}
      onSlideChange={() => console.log('slide change')}
    >

But I couldn’t use this module way, so instead of module, I use like below way like below.

SwiperCore.use([EffectFlip, Navigation, Pagination]);

Reference

Swiper official site: https://swiperjs.com/

Github account: https://github.com/aujourdui/portfolio

Github gist page: https://gist.github.com/aujourdui

Thank you for reading!