react-id-swiper is not working with dynamic cards

Question

I have a reactJS cards component which fetches data from strapi and then I am implementing react-id-swiper with the dynamic cards which are built on the go. Now react-id-swiper is working fine if I hardcode the cards. But is not working with the logic. I am pasting the code for the cards.

`import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './desktop-card.module.css';
import Swiper from 'react-id-swiper';
import 'swiper/css/swiper.css';



const params = {
    direction: 'horizontal',
    loop: true,
    slidesPerView: 'auto',
    mousewheel: true,
    autoPlay: {
        delay: 2000
    }
}

const Cards = props => {
    const singleCard = props.cardsData.map((card, index) => {
        return (
            <React.Fragment key={index}>
                <div className="scene scene--card swiper-slide">
                    <div className="mojo-card d-flex flex-column" style={{backgroundColor:card.backgroundColor}}>
                        <h3 className="heading py-4 px-4">{card.heading}</h3>
                        <p className="card-content px-4">{card.content}</p>
                        <div className="mojo-card__img card-img-data">
                            <img alt={'image'+card.id}/>
                        </div>
                    </div>
                </div>
            </React.Fragment>
        )
    });
    return <React.Fragment>{singleCard}</React.Fragment>
}

class DeskTopCards extends Component {
    render() {   
        const { cardsData } = this.props;
        if(!this.props) return null;
        return ( 
            <Swiper {...params}>
                <Cards cardsData={cardsData}/>
            </Swiper>
        )
    }
}

export default DeskTopCards;

`

Please help. I am new to ReactJS.

Here is the parent components code. The cardsData is not empty.

```
import React from 'react';
import ReactDOM from 'react-dom';
import DesktopCards from './Desktop-card/desktop-card';

class CardContainer extends React.Component {
    state = {
        data: []
    }
    componentDidMount() {
        const url = '';// strapi url

        fetch(url)
            .then(result => result.json())
            .then(result => {
                this.setState({
                    data: result
                });
            });
    }

    render() {
        const { data } = this.state;
        return (
            <div className="col-lg-7 col-md-7 px-0 box d-flex w-100 flex-row align-items-center justify-content-center right-side-scroll">
                   <DesktopCards cardsData={data}/>
            </div>
        )
    }
}

export default CardContainer;
```

Answer 1

It might be too late but I stumbled on this as well. The trick is in the documentation but it's quite easy to miss. Image from the documentation on github Which means that for any custom component you need to wrap it up with an html element such as div. So for example:

<Swiper>
 <div><Card1/></div>
 <div><Card2/></div>
 <div><Card3/></div> 
</Swiper>

Kind of sucks to do this but if it's necessary for you to use the library, that should do it.

Answer 2

I was trying examples from https://react-id-swiper.ashernguyen.site/ which is not working fine on my local even i gone through their code in sandbox which works there.

After a some analysis i suspected some css were missed in swiper 6.1.2, Hence I degraded swiper version to 5.3.8

That works for me, Tried few examples It's working fine on my machine.

package.json

"react-id-swiper" : "^4.0.0",
"swiper" : "5.3.8"