(React)How To Use React Swiper

If you just began learning React or working on a React project, you probably want to create a beautiful slider that adds an aesthetic boost to your pictures. In this post, I will walk you through the React Swiper basics and help you create a slider component using the library.

Simple Slider in React

Prerequisite

• Basic knowledge about react such as component, props
• Create a basic react app if you do not have it and remove unnecessary codes
• Open the terminal and enter this command shown below

npx create-react-app [your project folder name]

Structure

The picture above shows how the initial structure should look like. First, I imported a few modules from the Swiper library. Next, I created the Slider component index.js under the Slider folder and imported the Slider component App.js. Then, I created a Slider that shows the pictures. I created an array of data which is stored in a data folder with images in an asset folder.

Install Swiper library

Open the terminal and enter this command shown below

npm install swiper

Install Swiper modules

In index.js under the Slider folder, I imported only 4 modules from swiper library that are Navigation, Pagination, EffectFade, Autoplay. If you want to use other modules, you need to import the modules as well. you can find other modules on the website and their purposes.

Now, the Slider component could look like:

The comments in the code block might explain quite a lot. but, you may still be unsure of what swiper.style.js does or just what it is. this is a styled-component in order to apply css rules to the Slider component. Styled-component is a component in which you wrap a target component where you apply css rules. In a later post, I might go into greater details. In the meantime, here is the code:

Pictures

You can replace these with your own images. Just make sure the path to the images is correct.

App.js

Notice that I imported all the css files that are required.

Conclusion

Finally, we created a simple Slider component. There are a lot of different options to implement Swiper library. You might want to play with these variation by yourself and find what works for you!

I hope you enjoyed this article!

THANKS FOR READING. SEE YOU NEXT TIME!

You can find this article on my own blog as well.

How To Use React Swiper