Swiper4.0在React中回调函数没有触发。

caoyan

如题，本人现在使用react开发项目，用到了swiper，轮播图可以正常使用，但是回到函数却一个没有触发？还是本人写法有问题，求大佬指教
componentDidMount() {
    var ele = this.refs.swiperContainer;
    var mySwiper = new Swiper(ele, {
      speed: 4000,
      spaceBetween: 0,
       // initialSlide: this.state.slideIndex,
      onKeyPress: function(swiper, event){
        alert('你按了键盘'+event);
        },
      onTap: function(swiper){
        alert('你tap了Swiper');
      },
      onClick:function(){
        console.log(123);
      },
      onInit: function(swiper) {
        alert();
        console.log(swiper.activeIndex); //提示Swiper的当前索引
      },
      onSlideChangeEnd: function(swiper) {
        alert();
        console.log(swiper.activeIndex); //切换结束时，告诉我现在是第几个slide
      }

    });

chenghai

kanxia shi ge shnme

菜鸟求助

楼主解决了吗

mujimz

楼主 react中怎么引用swiper啊，我引用时就报错啊

三大框架都会码

我就想知道你怎么build的

phin

1. import 'whatwg-fetch'
   
2. import BannerLess from '../../css/banner.less'
   
3. import SwiperLess from '../../css/swiper.less'
   
4. import React from 'react'
   
5. import Swiper from 'swiper'
   
6. 
   
7. export default class Banner extends React.Component {
   
8.   constructor() {
   
9.     super()
   
10.   }
    
11. 
    
12.   componentDidMount(){
    
13.     var ele = this.refs.swiperContainer
    
14.     var mySwiper = new Swiper(ele, {
    
15.       direction:'horizontal',
    
16.       navigation: {
    
17.         nextEl: '.swiper-button-next',
    
18.         prevEl: '.swiper-button-prev'
    
19.       }
    
20.     })
    
21.   }
    
22. 
    
23.   render() {
    
24.     return (
    
25.       <div className='banner'>
    
26.         <div className='swiper-container' ref='swiperContainer'>
    
27.           <div className='swiper-wrapper'>
    
28.             <div className='swiper-slide'>Slide 1</div>
    
29.             <div className='swiper-slide'>Slide 2</div>
    
30.             <div className='swiper-slide'>Slide 3</div>
    
31.           </div>
    
32.           <div className='swiper-button-prev' />
    
33.           <div className='swiper-button-next' />
    
34.         </div>
    
35.       </div>
    
36.     )
    
37.   }
    
38. }
    

复制代码

SipkeTang

楼主解决了么

yijiang311

我想知道大家都build不起来吗一样报swiper.esm.bundle.js:56
这个错吗