reactjs中如何使用swiper.js

Question

reactjs中如何使用swiper.js的这个效果

main.jsx如下：

import $ from 'jquery';
import './js/swiper.jquery.min.js';
import React from 'react';
import {render} from 'react-dom';

var shell = document.createElement('div');
shell.id = 'mainDiv';
document.body.appendChild(shell);
//添加meta标签
let oMeta = document.createElement('meta');
oMeta.name = "viewport";
oMeta.content="width=device-width,initial-scale=1.0";
document.getElementsByTagName('head')[0].appendChild(oMeta);

var MainBox = React.createClass({
    render: function() {
        return (
    <div>
    <link rel="stylesheet" href="src/stylesheets/style.css"/>
    <link rel="stylesheet" href="src/stylesheets/swiper.min.css"/>
    <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 className="swiper-slide">Slide 5</div>
            <div className="swiper-slide">Slide 6</div>
            <div className="swiper-slide">Slide 7</div>
            <div className="swiper-slide">Slide 8</div>
            <div className="swiper-slide">Slide 9</div>
            <div className="swiper-slide">Slide 10</div>
        </div>
        <div className="swiper-pagination"></div>
    </div>
    </div>
        );
    }
});
render(<MainBox/>, document.getElementById('mainDiv')
);
$(document).ready(function () {
var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    direction: 'vertical'
});
});

浏览器显示的效果不对

Answer 1

你加swiper的样式了没有？

Answer 2

你需要在react的生命周期内去写这些操作
具体应该是dom已经同步到网页
方法名称我忘记了

Answer 3

看swiper4.0的文档

应该是

Answer 4

https://segmentfault.com/q/10...，亲测有效

Answer 5

文章太老了，我照搬的时候踩了不少坑， swiper的设置得在 componentDidMount写

Answer 6

npm install swiper 的方法不好用 我使用引入cdn的方式引入 然后写到组件当中 中间有很多坑

但是这种方式貌似只支持 静态轮播内容 请求的数据map遍历后就出现这个问题
图片是多张 因为map时<img className="swiper-slide"> 只有一个 所以渲染出来只有一个下标 不能轮播 可以拖动

Answer 7

你好 react里使用swiper无法滚动 我想问你是如何解决的 谢谢