Swiper中文论坛

标题: 如何在react中使用swiper？求实例 [打印本页]
作者: alili    时间: 2016-5-5 00:24
标题: 如何在react中使用swiper？求实例
如题，怎么在react中使用swiper？？？
作者: 戴戴戴    时间: 2017-8-31 18:40
楼主知道答案了吗
作者: Evelyn    时间: 2017-9-15 19:31
可以didmount 用ref 拿到实例之后new swiper
作者: phin    时间: 2018-4-12 09:55
  1. import React from 'react'
  2. import Swiper from 'swiper'

  4. export default class Banner extends React.Component {
  5.   constructor() {
  6.     super()
  7.   }

  9.   componentDidMount() {
  10.     var mySwiper = new Swiper('.swiper-container', {
  11.       direction:'horizontal',
  12.       navigation: {
  13.         nextEl: '.swiper-button-next',
  14.         prevEl: '.swiper-button-prev'
  15.       }
  16.     })
  17.   }

  19.   render() {
  20.     return (
  21.       <div className='banner'>
  22.         <div className='swiper-container'>
  23.           <div className='swiper-wrapper'>
  24.             <div className='swiper-slide'>Slide 1</div>
  25.             <div className='swiper-slide'>Slide 2</div>
  26.             <div className='swiper-slide'>Slide 3</div>
  27.           </div>
  28.           <div className='swiper-button-prev' />
  29.           <div className='swiper-button-next' />
  30.         </div>
  31.       </div>
  32.     )
  33.   }
  34. }
复制代码
作者: phin    时间: 2018-4-12 09:56
phin 发表于 2018-4-12 09:55
  1. Uncaught TypeError: Cannot read property 'params' of undefined
复制代码
作者: phin    时间: 2018-4-12 09:56
  1. Entrypoint main [big] = bunld.js
  2.    [7] ./node_modules/_swiper@4.2.2@swiper/dist/js/swiper.esm.bundle.js + 2 modules 243 KiB {0} [built]
  3.        |    3 modules
  4.    [8] ./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} [built]
复制代码
作者: phin    时间: 2018-4-12 09:57
我有同样的问题
作者: yijiang311    时间: 2018-4-17 18:40
phin 发表于 2018-4-12 09:57
我有同样的问题

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




欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/) Powered by Discuz! X3.2