I'm wondering how to create a nested swiper like the one on the Swiper Demos for the i

Hi <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="

Creating a nested swiper about react-id-swiper HOT 2 CLOSED

kidjp85 commented on August 27, 2024

Creating a nested swiper

from react-id-swiper.

Comments (2)

kidjp85 commented on August 27, 2024

Hi @krustina , you can try with demo repo, I will have a look when I have time and push this to demo

from react-id-swiper.

krustina commented on August 27, 2024

ok i have tried something else, where now im working in ES6.. here is my error and my code:
error:

Error in ../~/react-id-swiper/lib/index.js
Module not found: 'react' in [my directory]/node_modules/react-id-swiper/lib

@ ../~/react-id-swiper/lib/index.js 9:13-29

my code:

import React, { Component } from 'react';
import Swiper from 'react-id-swiper';
import './App.css';

class Mobile extends Component {
    render() {
        const vParams = {
            direction: 'vertical',
            pagination: '.swiper-pagination-v',
            paginationClickable: true,
            keyboardControl: true,
            nextButton: '.arrow-down',
            mousewheelControl: false
        }
        const hParams = {
            direction: 'horizontal',
            pagination: '.swiper-pagination-h',
            paginationClickable: true,
            spaceBetween: 50,
            keyboardControl: true,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            mousewheelControl: false
        }
        return (
            <div className="mobile">
                <Swiper {...vParams}>
                    <div className="swiper-slide">
                        <div className="main-container">
                            <div className="content">
                               ...
                            </div>
                        </div>
                    </div>

                    {/*nested swiper*/}
                    <div className="swiper-slide">
                        <Swiper {...hParams}>
                            <div className="swiper-slide">
                                <div className="main-container">
                                    ...
                                </div>
                            </div>
                            <div className="swiper-slide">
                                <div className="main-container">
                                    ...
                                </div>
                            </div>
                            <div className="swiper-slide">
                                <div className="main-container">
                                    ...
                                </div>
                            </div>
                            <div className="swiper-slide">
                                <div className="main-container">
                                    ...
                                </div>
                            </div>
                        </Swiper>
                    </div>
                    <div className="swiper-slide">
                        <div className="main-container">
                            ...
                        </div>
                    </div>
                </Swiper>
            </div>
    );

    }
}

export default Mobile;

I think it might be because the react-id-swiper index.js/lib is in ES5? Maybe im missing something?

from react-id-swiper.

Recommend Projects