首页 › 常见问题 › 如何在react中使用swiper？求实例

alili 发表于 2016-5-5 00:24:48

如何在react中使用swiper？求实例

如题，怎么在react中使用swiper？？？

戴戴戴 发表于 2017-8-31 18:40:34

楼主知道答案了吗

Evelyn 发表于 2017-9-15 19:31:10

可以didmount 用ref 拿到实例之后new swiper

phin 发表于 2018-4-12 09:55:23

import React from 'react'
import Swiper from 'swiper'

export default class Banner extends React.Component {
constructor() {
    super()
}

componentDidMount() {
    var mySwiper = new Swiper('.swiper-container', {
      direction:'horizontal',
      navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
      }
    })
}

render() {
    return (
      <div className='banner'>
      <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>
          <div className='swiper-button-prev' />
          <div className='swiper-button-next' />
      </div>
      </div>
    )
}
}

phin 发表于 2018-4-12 09:56:03

phin 发表于 2018-4-12 09:55


Uncaught TypeError: Cannot read property 'params' of undefined

phin 发表于 2018-4-12 09:56:46

Entrypoint main = bunld.js
    ./node_modules/_swiper@4.2.2@swiper/dist/js/swiper.esm.bundle.js + 2 modules 243 KiB {0}
       |    3 modules
    ./node_modules/_css-loader@0.28.11@css-loader??ref--5-1!./node_modules/_postcss-loader@2.1.3@postcss-loader/lib!./node_modules/_less-loader@4.1.0@less-loader/dist/cjs.js!./src/common/less/common.less 4.22 KiB {0}

phin 发表于 2018-4-12 09:57:13

我有同样的问题

yijiang311 发表于 2018-4-17 18:40:01

phin 发表于 2018-4-12 09:57
我有同样的问题

你好，你解决这个问题了吗，是不是本身bug，我也一样出现./node_modules/swiper/dist/js/swiper.esm.bundle.js:56
说什么56行无法编译

查看完整版本: 如何在react中使用swiper？求实例