Implementing Swiper In React

Swiper is a really simple, free and a lightweight library that gives you a fully capable slider which has one of best mobile response ever designed. It is designed to be used in mobile websites, mobile web apps, and mobile native/hybrid apps and therefore we get some of the cool and amazing transitions, eg: the infamous coverflow and carousel effect. I would highly recommend checking out there official website which has really neat and well-explained documentation on Swiper API and its demos.

Here I will not be explaining about React much which I assure you know its basics already. I will be showing on easy integration of swiper to react, somethings to be considered and also application of a filter function over Swiper to filter the slides shown.

Just An Update

This article was written long back when swiper was rising. Now, swiper out of the box supports multiple frameworks like Angular, Vue, React. They have also given proper documentation to each framework. Do check it out. But if you want to implement swiper in react from bottom up. This would still be the answer : ) Thank You.

Setting Up The Environment

Now to integrate first you need to install the npm module of swiper using

npm i --save swiper

Using Swiper

Consider you want to add a slider to an App component for that first you have to do three things

1. Import Swiper library from swiper npm

import Swiper from 'swiper'

2. Adding the swiper CSS to the app module which is provided with the npm module or there is also SCSS for swiper provided in the SCSS folder.

import 'swiper/css/swiper.min.css'

3. Then add your own app.css or app.scss after swiper

import './App.css'

Now, this is an important step because we need to override some values of swiper CSS to make it properly functional as stated in API. For that our CSS must be imported after swiper.css to override it. Now add following code to app.css

.swiper-container {
width: 100%;
height: 100%;
/*this gives the dimension of slider container*/
/*these values will make the container as big as the parent div*/
overflow: hidden;
/*important parameter to not disrupt the container when slides increases in coverflow and other effect*/
}
.swiper-slide {
width:300px;
height:300px;
/*this one holds the dimension of each slides and can be changed according to the user wish*/
}

The above step is really important and must be provided with the user wished values else swiper slides will be broken.

Adding Swiper to App Component

If your looking for the hooks version of swiper integration its in the next section.

The following code shows HTML and JS part of Swiper integration to App.

import React,{Component} from 'react'
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
import './app.css' //considers app.css in the same dir
class App extends Component{
componentDidMount(){
this.swiper=new Swiper('.swiper-container',{...})
//add necessary parameters required by checking the offical docs of swiper
}
render(){
    return(
        <div className="swiper-container">
            <div className="swiper-wrapper">
                <div className="swiper-slide">Slide 1</div>
                <div className="swiper-slide">Slide 1</div>
                <div className="swiper-slide">Slide 1</div>
                <div className="swiper-slide">Slide 1</div>
            </div>
        </div>)
}
}

Splitting Each Steps Above:

1. The div classes:

• .swiper-container: This class holds the whole UI slider container. You can change the name of this to anything you want but the change must also be made to CSS and in JS initialization.
• .swiper-wrapper: No change has to make. It wraps all the slides into one.
• .swiper-slide: This could be overridden to give a flexbox inside when images and other div gets nested inside.
• There are more classes of div like pagination, navigation keys, etc. Check the official doc for those.

2. The JS class initialization

The JS initialization must be made inside the life-cycle method ComponentDidMount to not break the state and also for the smooth swiper JS working. This keyword must be bound to swiper initialization for the access of swiper methods, in which some will be discussed in a minute. With this much, you could obtain a high touch responsive and a dynamic slider thanks to swiper.

Hooks version

import React,{useEffect,useRef} from 'react';
import Swiper from 'swiper';
import 'swiper/css/swiper.min.css'
import './App.css';
const App = () => {
    const swiper = useRef(null)
    useEffect(()=>{
        swiper.current=new Swiper('.swiper-container',{...})
//add necessary parameters required by checking the offical docs of swiper
},[])
return(
    <div className="swiper-container">
        <div className="swiper-wrapper">
            <div className="swiper-slide">Slide 1</div>
            <div className="swiper-slide">Slide 2</div>
            <div className="swiper-slide">Slide 3</div>
            <div className="swiper-slide">Slide 4</div>
        </div>
    </div>
  )
}

Splitting Each Steps Above:

1. The div classes:

• swiper-container: This class holds the whole UI slider container. You can change the name of this to anything you want but the change must also be made to CSS and in JS initialization.
• swiper-wrapper: No change has to make. It wraps all the slides into one.
• swiper-slide: This could be overridden to give a flexbox inside when images and other div gets nested inside.
• There are more classes of div like pagination, navigation keys, etc. Check the official doc for those.

2. The JS class initialization

• Swiper js class must be initialized inside useEffect with [] as dependencies meaning useEffect will act as componentDidMount so it doesn’t break the state and also for smooth DOM operations.
• useRef hook is used with its .current property so that we can persist the instance through out the components and also we can access it in useEffects.

Application Of Filter

Check out my repo on the integration of swiper with react. It also has a filter function applied over it.

More specifically go to App.js to view the filter and all.

Now to explain, so basically, I have shown a demo in that in which I took category in state and while showing the slides, it got filtered based on the category state.
The important thing to consider is the following:

this.setState({...someSateChange...},()=>{this.swiper.update()})

That is when you change the state for DOM manipulation, swiper won’t recognize it automatically. As a result, there won’t be elements inside swiper but the Slider will be broken with vacant spaces and malfunction. To avoid this after you setState, a callback function must be passed to update using the swiper method update(). Now, this comes to a role here. This will update swiper based on the state changes Thus for any DOM changes update() must be called for swiper DOM change to be made.

Using Hooks

If your using hooks in my above attached repo open AppHook.js to view on application of filter.

useEffect(()=>{swiper.current.update()},[index])

So as callback in Class Components in React we use useEffect to be depended on index state. So when index state changes or updates we will call update function inside swiper.current only after the state has changed. This will give a smooth DOM update based on the state changes without breaking the swiper effects. Else calling update function right after setIndex won’t have any effect and causes DOM to break.

Additional Notes

1. When you want to render the slides based on after an async REST API call then you must initialize the swiper by passing it as a callback when the request is completed, else the JS will be broken for Swiper.

axios.get("url").then(()=>{
    this.swiper=new Swiper('.swiper-container',{...})
})
// use swiper.current = new Swiper('.swiper-container',{...}) for hooks condition

2. There are more methods for Swiper instance. Like

• this.swiper.slideTo(index,speed,callback): To slide to a particular slide in a smooth effect
• this.swiper.activeIndex: The index number of the currently active slide
• For more instances and methods check the link

Remember here this.swiper is just used wrt to explained above it could be whatever you guys wish as long as declared correctly.

Thank you for reading my article. This was my first article on Medium. Please share your feedback and also any doubts regarding this. Adios and Have A Great Day :)